在 jquery easyautocomplete 中筛选 Json 数据
Filter Json data in jquery easyautocomplete
下面的代码工作正常。我求助,我想过滤json数据,也就是我想显示相应id大于等于3的标签。
在这种情况下,建议列表中应该只显示 "India" 和 "France"。
请注意,我使用了 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);
这是迭代抛出项目数组的代码:
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);
}
});
试试这个,
$(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>
下面的代码工作正常。我求助,我想过滤json数据,也就是我想显示相应id大于等于3的标签。
在这种情况下,建议列表中应该只显示 "India" 和 "France"。
请注意,我使用了 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);
这是迭代抛出项目数组的代码:
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);
}
});
试试这个,
$(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>