Crumblenautjs Crumblenautjs - 1 month ago 7
Ajax Question

JQuery UI AutoComplete AJAX call

I am trying to create a search field that autocompletes with suggestions from a database using an ajax call. Upon selecting an item, I would like for it to update the search field. Currently when I type something into this textbox, it returns an empty selection. Any help would be appreciated.

Here's the code, updated with recommended changes, however now I am getting the empty list.

function autoCompleteCheckRun() {
$('#autocompleteCR')
.autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: './PayInvoicesWS.asmx/GetCheckRun',
data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
dataType: "json",
success: function (data) {
var rows = autocompleteJSONParseCode(data);
response(rows);
},
error: function (result) {
alert("Error");
},
select: function (event, ui) {
var checkRunData = $("#CheckRunDescription");
var checkRunID = $("#CheckRunID");
checkRunData.val(ui.item.label);
checkRunID.val(ui.item.value);


}
});
}
});
}

function autocompleteJSONParseCode(data) {
var rows = new Array();
var rowData = null;
for (var i = 0, dataLength = data.d.length; i < dataLength; i++) {
rowData = data.d[i];
// alert(rowData.term2+":"+rowData.term1);//uncomment to see data as it parses
rows[i] = {
value: rowData.CheckRunID,
label: rowData.Description
};
}

return rows;
}

div class="ui-widget">
<label for="autocompleteCR" id="checkRunLabel">Check Run Lookup:</label>
<input type="text" id="autocompleteCR" />
</div>


example

Answer

You have misplaced select function. Move it out from source function and place parallel to the source function.

$('#autocompleteCR')
          .autocomplete({
              minLength: 0,
              source: function (request, response) {
                  $.ajax({
                      type: "POST",
                      contentType: "application/json; charset=utf-8",
                      url: './PayInvoicesWS.asmx/GetCheckRun',
                      data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
                      dataType: "json",
                      success: function (data) {
                          var rows = autocompleteJSONParseCode(data);
                          response(rows);
                      },
                      error: function (result) {
                          alert("Error");
                      }
                  });
              },
              select: function (event, ui) {
                          var checkRunData = $("#CheckRunDescription");
                          var checkRunID = $("#CheckRunID");
                          checkRunData.val(ui.item.label);
                          checkRunID.val(ui.item.value);


              }
          });

I have made a working example for what you are looking for:

https://jsfiddle.net/gschambial/d0g3dLvu/19/

$( "#tags" ).autocomplete({
  source: availableTags,
  select: function(event, ui) {
            alert('Label is :' + ui.item.label + ' and Value is : ' +ui.item.value);
    }
});

Change

function(el) {
return {
     CheckRunID: el.CheckRunID,
     Description: el.Description
     };
}));

To

function(el) {
return {
     value: el.CheckRunID,
     label: el.Description
     };
}));

and instead of

checkRunData.val(ui.item.CheckRunID + ui.item.Description);

use

checkRunData.val(ui.item.label + ui.item.value);