jQuery autocomplete (devbridge) lookupFilter to search multiple attributes

Question

I have below code-

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

I want to do search based on 'value' and 'id' both. There is lookupFilter function but i dont know how to use it. Here is original script - https://www.devbridge.com/sourcery/components/jquery-autocomplete/ and Here is something similer question - jQuery autocomplete (devbridge) search from beginning
Help please!

Answer 1

lookupFilter: function (suggestion, query, queryLowerCase) {} filter function for local lookups. By default it does partial string match (case insensitive).

Code:

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

Answer 2

There are 2 problems with the previous answers I'd like to correct.

• Yosvel 's solution only returns Strings starting exaclty with the query. Meaning, searching for "App" returns "Apple", but searching for "ple", doesn't return "Apple", which should be the default behaviour of devbridge-autocomplete we want to keep (if not desired otherwise) .

• vijayP 's answer doesn't return, what we are searching. The less-than -oprator < has to be turned around to a greater-than -operator > , because wa want to return items where .indexOf(query) returned a value greater than -1, meaning the query has been found somewehere in either id , or value .

Thank you for helping me! Here's the correct solution:

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

Can you try with below code:

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

Note: I couldn't able to test this code but i believe it should work for you.