Implement success: function (data) in select: function (event, ui)
I am Implementing Autocomplete and also trying to get a user' detail. The autocomplete works but I can not get the details. Below is my full Jquery code
- $(function () {
- function split(val) {
- return val.split(/;\s*/);
- }
- function extractLast(term) {
- return split(term).pop();
- }
- //New event handlers
- $(".user-container")
- .on("userSelected", function (event) {
- var targetData = event.target.uiItem;
- jqAppendOptionLast(targetData.id, targetData.value, '.user-list', this);
- event.stopPropagation();
- }
- );
- $(".user-container")
- .on("userRemove", function (event) {
- //var targetData = event.target;
- //alert(targetData);
- jqRemoveOptionSelected('.user-list', this);
- event.stopPropagation();
- }
- );
- $(".user-remover").click(function (event) {
- event.stopPropagation();
- this.dispatchEvent(userRemoveEvent());
- });
- //End new event handlers
- //testing
- $(".user-source")
- // don't navigate away from the field on tab when selecting an item
- .bind("keydown",
- function(event) {
- if (event.keyCode === $.ui.keyCode.TAB &&
- $(this).autocomplete("instance").menu.active) {
- event.preventDefault();
- }
- })
- .autocomplete({
-
- source: function (request, response) {
-
- $.getJSON("/UserReplacement/Autocomplete", {
- term: extractLast(request.term)
- }, response);
- },
- search: function () {
- // custom minLength
- var term = extractLast(this.value);
- if (term.length < 2) {
- return false;
- }
- },
- focus: function () {
- // prevent value inserted on focus
- return false;
- },
- success: function (data) {
- var user = new Array();
- for (var i = 0; i < data.length ; i++) {
- user[i] = { label: data[i].Value, Id: data[i].Key };
- }
- },
- select: function (event, ui) {
- $.getJSON("/UserReplacement/GetDaeils",
- {
- "id": ui.item.Id
- });
-
-
- debugger;
- //New accessor for event propogation
- this.uiItem = ui.item;
- var terms = split(this.value);
- // remove the current input
- terms.pop();
- // add the selected item
- terms.push(ui.item.value);
- // add placeholder to get the comma-and-space at the end
- terms.push("");
- this.value = terms.join("; ");
-
-
- if (!(typeof userSelectedEvent === "undefined")) {
- this.dispatchEvent(userSelectedEvent());
- this.value = "";
- }
-
- success: function (data) {
- $('#Number').show();
- $("#Name").html(data.UserName);
- $("#PatientName").html(data.PatientName);
-
- }
- return false;
- }
-
- });
- });