Skip to main content
 首页 » 编程设计

javascript之jQuery 自动完成(devbridge)lookupFilter 搜索多个属性

2026年04月21日5347qq78292959

我有以下代码-

$(function() { 
 
var fruits = [ 
   { value: 'Apple',id: '123',  data: 'Apple' }, 
   { value: 'Pear', id: '543',   data: 'Pear' }, 
   { value: 'Carrot', id: '123', data: 'Carrot' }, 
   { value: 'Cherry', id: '234', data: 'Cherry' }, 
   { value: 'Banana', id: '543', data: 'Banana' }, 
   { value: 'Radish', id: '3423', data: 'Radish' } 
]; 
 
  $("#autocomplete").autocomplete({ 
        lookup: fruits, 
        onSelect: function (suggestion) { 
          alert('You selected: ' + suggestion.value + ', ' + suggestion.data); 
        }, 
  }); 
}); 

我想根据“值”和“id”进行搜索。有lookupFilter功能,但我不知道如何使用它。这是原始脚本 - https://www.devbridge.com/sourcery/components/jquery-autocomplete/ 这是一个类似的问题 - jQuery autocomplete (devbridge) search from beginning
请帮忙!

请您参考如下方法:

之前的答案有两个问题我想更正。

  • Yosvel的解决方案仅返回以查询精确开头的字符串。意思是,搜索“App”会返回“Apple”,但搜索“ple”不会返回“Apple”,这应该是 devbridge-autocomplete 的默认行为。我们希望保留(如果不需要的话)

  • vijayP的答案没有返回,我们正在寻找什么。 less-than -运算符(operator)<必须转向 greater-than -运算符(operator)> ,因为 wa 想要返回 .indexOf(query) 的项目返回大于 -1 的值,这意味着已在 id 中的某处找到查询。 ,或value .

谢谢你帮助我!正确的解决方案如下:

var fruits = [ 
   { value: 'Apple',id: '123',  data: 'Apple' }, 
   { value: 'Pear', id: '543',   data: 'Pear' }, 
   { value: 'Carrot', id: '123', data: 'Carrot' }, 
   { value: 'Cherry', id: '234', data: 'Cherry' }, 
   { value: 'Banana', id: '543', data: 'Banana' }, 
   { value: 'Radish', id: '3423', data: 'Radish' } 
]; 
 
  $("#autocomplete").autocomplete({ 
        lookup: fruits, 
        onSelect: function (suggestion) { 
          alert('You selected: ' + suggestion.value + ', ' + suggestion.data); 
        }, 
        lookupFilter(suggestion, query, queryLowerCase) { 
            return suggestion.value.toLowerCase().indexOf(queryLowerCase) > -1 || suggestion.id.indexOf(query) > -1; //checking with both id as well as value 
        } 
  }); 
});