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方法负责构建和显示下拉列表。它从控制器返回数据。在原始代码中，您将覆盖它，因此在该点处有效处理停止，并且您没有看到正在呈现的下拉列表。

以上是从远程数据源加载项目的上述链接的摘录（评论我的）：

$( "#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自动完成

1 个答案: