title: JQuery UI AutoComplete AJAX call
body: <p>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. </p>
  
  <p>Here's the code, updated with recommended changes, however now I am getting the empty list.</p>
  
  <pre><code>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 &lt; 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"&gt;
                          &lt;label for="autocompleteCR" id="checkRunLabel"&gt;Check Run Lookup:&lt;/label&gt;
                          &lt;input type="text" id="autocompleteCR" /&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/n0JBe.png" rel="nofollow"><img src="https://i.stack.imgur.com/n0JBe.png" alt="example"></a></p>