2016-01-19 44 views
1

下面的代码工作正常。我要求的是我要过滤json数据的帮助,也就是我想要显示大于或等于3的相应id的标签。在JQuery中过滤Json数据easyautocomplete

在这种情况下,应该只显示“印度”和“法国“的建议名单。

请注意,我使用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); 

回答

1

尝试了这一点,

$(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>

+0

是的。它运行良好。谢谢。 – riyaz

+0

没问题。为它工作感到高兴。祝你好运 –

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

注:”将需要加载选项变量与GET aj ax请求在json文件上使用已过滤而不是选项在您的自动完成中。

这里是用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); 
    } 
}); 
+0

我的JSON文件太长,我应该保持这种作为一个远程文件,而不是像你所做的那样。 – riyaz

+0

我编辑了我的答案,包括使用ajax查询和自动完成初始化加载数据。 –