如何在jQuery UI Autocomplete中的过滤结果中实现我自己的规则

Question

这是我的代码：

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

因此，现在，例如，如果我在字段中键入“ H”，则将显示所有3个结果（即PH2938，JUH28，HK383）。 我的问题是：是否可以仅显示fk = 3的结果（即PH2938，HK383）。也就是说，我可以实施自己的规则来显示哪个结果。

Answer 1

如果我已正确理解，则需要按某些条件过滤projects 。 在这种情况下， fk等于'3' 。

由于您已经在使用jQuery，因此$ .grep是筛选任务的理想选择。

$.grep(projects, function (project) {
  return project.fk === '3';
});

现在，我们必须决定在哪里执行此过滤。

如果您想摆脱那些符合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';
});

如果您想要的是更灵活的东西，它允许您根据其他条件提供不同的数据源，不仅是标签的文本匹配，还可以在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);
},

过滤也可以在匹配之前执行：

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

请参阅后者的演示 。