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/ 这是一个similer问题 - jQuery autocomplete (devbridge) search from beginning
求救！

Answer 1

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

代码：

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

Answer 2

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

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

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

注意：我无法测试此代码，但我相信它应该适合您。

jQuery自动完成（devbridge）lookupFilter搜索多个属性

3 个答案: