[英]How to implement my own rule in filter result in jQuery UI Autocomplete
This is my code: 这是我的代码:
var projects = [{label:"PH2938", value: "1", fk: "3", desc: "hello"},
{label:"JUH28", value: "2", fk: "0", desc: "world"},];
{label:"HK383", value: "3", fk: "3", desc: "!"},];
$( "#serial_no" ).autocomplete({
minLength: 0,
source: function(request, response) {
var results = $.ui.autocomplete.filter(projects, request.term);
response(results);
},
focus: function( event, ui ) {
$( "#serial_no" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#serial_no" ).val( ui.item.label );
$( "#device_id" ).val( ui.item.value );
$( "#device_model" ).text( ui.item.desc );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
So now, for example, if I type 'H' in the field, all 3 results (ie PH2938, JUH28, HK383) will be shown. 因此,现在,例如,如果我在字段中键入“ H”,则将显示所有3个结果(即PH2938,JUH28,HK383)。 My question is: is possible to make it only show the results (ie PH2938, HK383) whose fk = 3. That is, can I implement my own rule in showing which results.
我的问题是:是否可以仅显示fk = 3的结果(即PH2938,HK383)。也就是说,我可以实施自己的规则来显示哪个结果。
If I have understood correctly you need to filter the projects
by some criteria. 如果我已正确理解,则需要按某些条件过滤
projects
。 In this case by fk
being equal to '3'
. 在这种情况下,
fk
等于'3'
。
As you are already using jQuery then $.grep is the good candidate for the filtering task. 由于您已经在使用jQuery,因此$ .grep是筛选任务的理想选择。
$.grep(projects, function (project) {
return project.fk === '3';
});
Now we have to decide where to perform this filtering. 现在,我们必须决定在哪里执行此过滤。
If you want to get rid of those projects that meet the fk
criteria regardless of the term used in the autocompletion input, I would do it in the original projects
array: 如果您想摆脱那些符合
fk
标准的项目,而不论自动完成输入中使用的术语如何,我都会在原始projects
数组中这样做:
var projects = [{label:"PH2938", value: "1", fk: "3", desc: "hello"},
{label:"JUH28", value: "2", fk: "0", desc: "world"},];
{label:"HK383", value: "3", fk: "3", desc: "!"},];
projects = $.grep(projects, function (project) {
return project.fk === '3';
});
If what you want is something more flexible that allows you to provide a different data source depending on other criteria, not only the text matching of the label, then you can perform this filtering in the source
property: 如果您想要的是更灵活的东西,它允许您根据其他条件提供不同的数据源,不仅是标签的文本匹配,还可以在
source
属性中执行以下过滤:
source: function(request, response) {
var results = $.ui.autocomplete.filter(projects, request.term);
// Filter the matched results by project fk 3.
results = $.grep(results, function (project) {
return project.fk === '3';
});
response(results);
},
The filtering could be performed before the matching too: 过滤也可以在匹配之前执行:
source: function(request, response) {
// Filter the matched projects by project fk 3.
var filteredProjects = $.grep(projects, function (project) {
return project.fk === '3';
});
var results = $.ui.autocomplete.filter(filteredProjects, request.term);
response(results);
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.