jQuery自动完成（Devbridge）lookupFilter用于搜索多个属性

Question

我有以下代码 -

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

我想基于'value'和'id'两者进行搜索。有一个lookupFilter函数，但我不知道如何使用它。以下是原始脚本-https://www.devbridge.com/sourcery/components/jquery-autocomplete/，这里有一个类似的问题-jQuery自动完成（Devbridge）从开头搜索
请帮忙！

- Ravinder singh

Answer 1

我发现之前的回答有两个问题需要进行纠正。

• Yosvel的解决方案只返回以查询开头的字符串。这意味着搜索"App"将返回"Apple"，但搜索"ple"不会返回"Apple"，而我们想要保留devbridge-autocomplete的默认行为(除非另有规定)。

• vijayP的答案没有返回我们要搜索的内容。小于号操作符<必须被反转成大于号操作符>，因为我们想返回id或value中包含查询的结果，即.indexOf(query)返回大于-1的值。

谢谢您的帮助！以下是正确的解决方案：

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

- Fabi Voltair

Answer 2

lookupFilter: function (suggestion, query, queryLowerCase) {} 是本地查找的过滤函数。默认情况下，它执行部分字符串匹配（不区分大小写）。

代码：

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) {
        console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
    },
    lookupFilter: function(suggestion, query, queryLowerCase) {
        var id = suggestion.id,
            value = suggestion.value.toLowerCase();
        return id.indexOf(query) === 0 || value.indexOf(queryLowerCase) === 0;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.26/jquery.autocomplete.min.js"></script>

<input type="text" name="fruit" id="autocomplete"/>

- Yosvel Quintero

Answer 3

你可以尝试以下代码：

$(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);
        },
        lookupFilter: function (suggestion, query, queryLowerCase) {
            return suggestion.value.toLowerCase().indexOf(queryLowerCase) < -1 || suggestion.id.toLowerCase().indexOf(queryLowerCase) < -1; //checking with both id as well as value
        }
  });
});

注意：我无法测试这段代码，但我相信它应该适用于你。

- vijayP

---

你确定你像这样做了吗suggestion.value.toLowerCase().indexOf(queryLowerCase) < -1。如果是的话，那么我会更新答案，以便其他人可以参考它。 - vijayP

我不确定那是否正确。我改成了“=== 0”而不是“<-1”，然后它对我起作用了。就像Yosvel的答案一样。 - Paintoshi