如何使用 jQuery 自动完成

Question

我看过很多很多示例，但无法弄清楚如何让自动完成工作。这是我的 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
    });

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

Answer 1

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

response = $.map(...);

到

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

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

这里是上面 link 从远程数据源加载项目的摘录（我的评论）：

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

如何使用 jQuery 自动完成

How to use jQuery Autocomplete

javascript

c#

jquery

autocomplete