如何使用 jQuery 自动完成功能答案

【问题标题】：How to use jQuery Autocomplete如何使用 jQuery 自动完成功能
【发布时间】：2015-06-20 02:41:35
【问题描述】：

我查看了很多很多示例，但无法弄清楚如何让自动完成功能正常工作。这是我的 HTML：

 <table>
    <tr>
        <td>
            Item Number:
        </td>
        <td>
            <input id="items" />
        </td>
        <td>
            @Html.DisplayTextFor(x=>x.ItemDescription)
        </td>
        <td>
            @Html.TextBoxFor(x=>x.ItemDescription, new { @id = "txtDescription" }) 
        </td>
    </tr>
</table>

这是我的 C# 代码：

 public ActionResult GetAllItemNumbers(string data)
    {
        List<string> result = ItemLookup.GetAllItemNumbers(data);
        var result1 = result.Where(item => item.Contains(data)).ToList();
        return Json(result1);
    }

这里是JS代码：

 $("#items").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'POST',
                dataType: "json",
                data: {data: request.term },
                url: '@Url.Action("GetAllItemNumbers")',
                success: function (data) {
                    response = $.map(data, function (item) {
                        return {
                            value: item
                        };
                    });
                }
             });
        },
        minLength: 4
    });

正在选择正确的项目并返回到成功函数。但是没有显示下拉菜单。如何显示与输入匹配的值的下拉列表？

【问题讨论】：

您的控制器操作是否标有[HttpPost]？当您调试您的代码时，您的控制器操作是否会受到影响？为什么不为#items 指定输入类型？您的页面中是否引用了 jQuery 和 jQuery UI？
是的，该方法运行得很好，并且正确的字符串列表返回到页面。我只是没有看到下拉结果。
根据Autocomplete demos，response 是一个回调函数，您应该向其传递您的数据（例如response($.map(...))）。
我正在映射它，正如您在上面看到的，但它有什么作用？您如何从中生成下拉菜单？
您将$.map 操作的结果分配给到 response，而不是将其作为参数传递给response（它是一个函数）。

标签： javascript c# jquery autocomplete

【解决方案1】：

根据Autocomplete demos，response 是一个回调函数，您应该向其传递您的数据。我认为你应该改变这一行：

response = $.map(...);

到

response($.map(...));

response 方法负责构建和显示下拉菜单。它获取从控制器返回的数据。在您的原始代码中，您正在覆盖它，因此有效处理在该点停止，并且您看不到正在呈现的下拉菜单。

以下是上述链接的摘录，用于从远程数据源（cmets 我的）加载项目：

$( "#city" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "http://gd.geobytes.com/AutoCompleteCity",
      dataType: "jsonp",
      data: {
        q: request.term
      },
      success: function( data ) {
        response( data ); // pass data INTO response, don't assign it
      }
    });
  },
  minLength: 3,
  // other methods omitted
});

【讨论】：

耶！做到了。谢谢！