Question

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

SCRIPT

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

Json自动完成从json列出所有元素

1 个答案: