JQuery UI 自动完成 AJAX 调用答案

【问题标题】：JQuery UI AutoComplete AJAX callJQuery UI 自动完成 AJAX 调用
【发布时间】：2016-10-14 04:42:28
【问题描述】：

我正在尝试创建一个搜索字段，该字段使用 ajax 调用自动完成来自数据库的建议。选择一个项目后，我希望它更新搜索字段。目前，当我在此文本框中输入内容时，它会返回一个空选择。任何帮助，将不胜感激。

这是代码，更新了推荐的更改，但是现在我得到的是空列表。

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>

【问题讨论】：

从自动完成建议中选择项目时，您到底想实现什么？当您选择一个项目时，它会自动填充所选项目，这不是很明显吗？你能更好地解释你的问题吗？
我希望它填充另一个文本框，然后我将使用它的值作为另一个 ajax 调用的参数，该调用从特定数据库表中获取项目。
在我的回答中检查更新的小提琴。我进行了更改以在另一个框中填充值。

标签： javascript jquery ajax autocomplete

【解决方案1】：

你放错了select函数。将其从source 函数中移出并与source 函数平行放置。

$('#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);


              }
          });

我已经为您正在寻找的内容做了一个工作示例：

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

改变

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

到

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

而不是

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

使用

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

【讨论】：

感谢您的回复。我进行了建议的更改。当我在字段中输入文本时，它确实会命中服务器端代码并返回我正在寻找的对象列表。但是，自动完成返回一个空选择，我在原始帖子中提供了该选择。这可能与我选择 dom 元素的方式有关。
你能试试console.log(ui.item.value) 告诉我开发者控制台上显示了什么吗？
从您的代码中删除 event.preventDefault(); 后也可以尝试。
要不要我把它加到选择功能上？
我还在success函数的返回部分放了一个断点，el以数组的形式显示对象。

【解决方案2】：

这就是它的工作原理：在 ajax 调用的成功函数中为 data.d 分配一个变量。还有@gschambial 关于我的选择功能在哪里的建议。最初它位于源函数内部，一旦我移出它，我就能够将列表中的值分配给 dom 元素。

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

          });
      }

观点：

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

【讨论】：