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