JQuery UI AutoComplete AJAX call

Question

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>

What exactly do you want to achieve on selecting the item from autocomplete suggestion? Isn't it obvious when you ll select an item, it will automatically be filled with the selected item? can you explain your question better? — gschambial
– gschambial, Commented Oct 13, 2016 at 17:16
I want it to populate another textbox, which I will then use its value as a parameter for another ajax call that grabs items from a particular database table. — Crumblenautjs
– Crumblenautjs, Commented Oct 13, 2016 at 17:51
Check the updated fiddle in my answer. I have made changes to fill value in another box. — gschambial
– gschambial, Commented Oct 13, 2016 at 17:54

gschambial · Accepted Answer · 2016-10-13 19:43:22Z

3

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);

edited Oct 13, 2016 at 19:43

answered Oct 13, 2016 at 17:42

gschambial

1,3892 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Crumblenautjs Over a year ago

Thanks for your reponse. I made the recommended changes. When I enter text into the field it does hit the server side code and returns the list of objects I'm looking for. However, the autocomplete returns an empty selection, which I've provided in the original post. It's probably something to do with how I'm selecting the dom elements.

gschambial Over a year ago

Can you try console.log(ui.item.value) and tell me what's shown on developer console?

gschambial Over a year ago

Also try after removing, event.preventDefault(); from your code.

Crumblenautjs Over a year ago

Would you like me to add it on the select function?

Crumblenautjs Over a year ago

I also put a breakpoint on the return part of the success function, and el shows the objects in an array.

|

Crumblenautjs · Accepted Answer · 2016-10-13 20:42:28Z

This is what got it to work: Assigning a variable to data.d inside the success function of the ajax call. Also @gschambial's suggestion regarding where I had my select function. Originally it was inside of the source function, which once I moved outside of it, I was able to assign the values from the list to dom elements.

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 el = data.d;
                    response($.map(el,
                        function(el) {
                            return {
                                label: el.Description,
                                value: el.CheckRunID
                            }
                        }));
                },
                error: function(result) {
                    alert("Error");
                }
             });
            },
            select: function (event, ui) {
                  $("#CheckRunDescription").val(ui.item.label);
                  $("#CheckRunID").val(ui.item.value);
                event.stopPropagation();
            }

          });
      }

The View:

 <div class="ui-widget">
                        <label for="autocompleteCR" id="checkRunLabel">Check Run Lookup:</label>
                        <input type="text" id="autocompleteCR" />
                    </div>
<div class="divTableCell">
                <label for="CheckRunDescription" id="checkRunDescriptionLabel">Description:</label>
                <input type="text" id="CheckRunDescription" style="width: 270px;" />
            </div>

Collectives™ on Stack Overflow

JQuery UI AutoComplete AJAX call

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related