javascript - jQuery autocomplete (devbridge) lookupFilter to search multiple attributes - Stack Overflow

admin管理员组

文章数量:1426058

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' }
];

  $("#autoplete").autoplete({
        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 - / and Here is something similer question - jQuery autoplete (devbridge) search from beginning
Help please!

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' }
];

  $("#autoplete").autoplete({
        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./sourcery/ponents/jquery-autoplete/ and Here is something similer question - jQuery autoplete (devbridge) search from beginning
Help please!

• javascript
• jquery
• search
• autoplete

Share Improve this question Follow edited May 23, 2017 at 10:34 CommunityBot 111 silver badge asked Sep 30, 2016 at 6:45 Ravinder singhRavinder singh 7588 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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-autoplete 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' }
];

  $("#autoplete").autoplete({
        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
        }
  });
});

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'}];

$('#autoplete').autoplete({
    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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery.devbridge-autoplete/1.2.26/jquery.autoplete.min.js"></script>

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

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' }
];

  $("#autoplete").autoplete({
        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.

本文标签： javascriptjQuery autocomplete (devbridge) lookupFilter to search multiple attributesStack Overflow