来自json的Jquery Autocomplete列出所有元素

Question

在我的自动完成脚本中，我设置了一个 json 文件：

脚本

<script type="text/javascript">
  $("#tags").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "test.json",
        dataType: "json",
        data: { term: request.term },
        success: function(data) {
          response($.map(data, function(item) {
            return { label: item.name_test };
          }));
        }
      });
    }
  });
</script>

HTML

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

JSON 文件

[{
  "id_test": "7",
  "name_test": "Tejido",
  "price": "65"
}, {
  "id_test": "8",
  "name_test": "Semen",
  "price": "120"
}, {
  "id_test": "6",
  "name_test": "Saliva",
  "price": "20"
}, {
  "id_test": "2",
  "name_test": "Analisis urinario",
  "price": "150"
}, {
  "id_test": "3",
  "name_test": "Analisis sanguineo",
  "price": "1502"
}, {
  "id_test": "4",
  "name_test": "Analisis fecal",
  "price": "20"
}]

但是当我在输入中输入一个名字时，所有的元素都会被列出来。

我的错误是什么？

Answer 1

当您使用远程源时，正如您的代码正在使用的那样，您必须需要在服务器端或来自 ajax 调用的 success 回调中过滤结果。在你的情况下，你可以使用类似的东西：

...
success: function (data) {
    var tag_val = $("#tags").val();
    response($.map(data, function (item) {

        //filtering results....
        if (item.name_test.indexOf(tag_val) != -1) {
            return {
                label: item.name_test
            };
        }
    }));
}