在 jquery easyautocomplete 中过滤 Json 数据答案

【问题标题】：Filter Json data in jquery easyautocomplete在 jquery easyautocomplete 中过滤 Json 数据
【发布时间】：2016-04-24 23:39:43
【问题描述】：

以下代码可以正常工作。我正在寻求帮助，我想过滤 json 数据，即我想显示大于或等于 3 的相应 id 的标签。

在这种情况下，建议列表中应仅显示“印度”和“法国”。

请注意我使用了Easy autocomplete plugin。

如果有人能帮我解决这个问题，我将不胜感激。提前致谢

下面是我的json文件

countries.json

[
{
"id": "0.1",
"label": "America" },{
"id": "0.9",
"label": "UAE" },{
"id": "3.2",
"label": "India"},{
"id": "3.02",
"label": "France" } ]

HTML 是

index.php

<div class="form-group">
                    <input id="city" type="text" name="city" class="form-control" />
                </div>

脚本是：

script.js

$(function() { var options = { url: "../review/countries.json", getValue: function(element) {
 return element.label; list: {
match: {
  enabled: true
} }; $("#city").easyAutocomplete(options);

【问题讨论】：

标签： javascript jquery json autocomplete jquery-autocomplete

【解决方案1】：

这里是迭代抛出项目数组的代码：

var options = [
    { "id": "0.1", "label": "America" },
    { "id": "0.9", "label": "UAE" },
    { "id": "3.2", "label": "India"},
    { "id": "3.02", "label": "France" }
];

var filtered = new Array();
$.each(option, function(index, item) {
    if(item.id >= 3) {
        filtered.push(item);
    }
});

注意：您需要在 json 文件中使用 GET ajax 请求加载 options 变量，并使用 filtered 而不是 options 在您的自动完成中。

这是一个完整的 ajax 加载示例：

$(document).ready(function(){
    $.getJSON("../review/countries.json", function(data) {
        var filtered = new Array();
        $.each(option, function(index, item) {
            if(item.id >= 3) {
                options.push(item);
            }
        });
        var options = {
            data: filtered
        };
        $("#city").easyAutocomplete(options);
    }
});

【讨论】：

我的 json 文件太长，我应该把它保存为远程文件，而不是像你做的那样。
我编辑了我的答案，包括使用 ajax 查询和自动完成初始化加载数据

【解决方案2】：

试试这个，

$(function() {

  var options = {
    url: "../review/countries.json",
    getValue: function(element) {
      var id = parseFloat(element.id);
      if (id > 3) {
        return element.label;
      } else {
        return '';
      }

    },
    list: {
      match: {
        enabled: true
      }

    }

  };
  $("#city").easyAutocomplete(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://easyautocomplete.com/dist/jquery.easy-autocomplete.min.js"></script>
<div class="form-group">
  <input id="city" type="text" name="city" class="form-control" />
</div>

【讨论】：