auto complete exact match from start using jquery autocomplete from simple array

Question

How do I enable exact match from start of string using jquery autocomplete with input from simple array?

If i have the following in an array:

smart
oversmart
smartland
undersmart
verysmart

And if I am typing "sma..." in the text input, i must be shown only smart and smartland, not the others.

possible duplicate of [jQuery Autocomplete plug-in search configuration](http://stackoverflow.com/questions/2382497/jquery-autocomplete-plug-in-search-configuration) — j08691, May 05 '12 at 17:18

score 16 · Accepted Answer · edited May 09 '14 at 15:23

You just need to modify source parameter as a function to suit your needs. Like this:

http://jsfiddle.net/UKgD6/

Update: Adding code to answer:

var acList = ['smart', 'oversmart', 'smartland', 'undersmart', 'verysmart'];
$('#ac').autocomplete({
    source: function (request, response) {
        var matches = $.map(acList, function (acItem) {
            if (acItem.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
                return acItem;
            }
        });
        response(matches);
    }
});

score 3 · Answer 2 · answered Jul 28 '16 at 14:52

The way to do this is documented at http://api.jqueryui.com/autocomplete/

<script>
    var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
    $( "#autocomplete" ).autocomplete({
      source: function( request, response ) {
              var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
              response( $.grep( tags, function( item ){
                  return matcher.test( item );
              }) );
          }
    });
</script>

I wonder whether this actually is the most efficient way. I have no idea. — lenny, Jul 18 '19 at 14:11

score 1 · Answer 3 · answered May 05 '12 at 17:18

1

You can use regular expressions to match the entered substring with the values in the array you have.

answered May 05 '12 at 17:18

atmd

7,430
2
33
64

score 0 · Answer 4 · answered May 05 '12 at 17:52

JQuery has way too many plug-ins. Just sprinkle a little regEx on it and write something like this (I didn't test it but I've done similar stuff before):

$('#someTextInput').keyup( function(){
    var regExMatch = new RegEx( '^' + $(this).val() );
    $_LIs = $('#someUl li');
    $_LIs.hide();
    $_LIs.each( function(){
        if( this.innerText.match(regExMatch) ) { $(this).show(); }
    } );
} );

You can remove the '^' + in the new RegEx parameters to restore the behavior you're describing as problematic. '^' signifies beginning of a line/string selection so 's' won't match unless it's at the start.

Erik - thank you, i will keep this in mind and tweak to see how it fits inside an autcomplete... — VKVK, May 06 '12 at 02:20

score 0 · Answer 5 · edited May 23 '17 at 11:47

0

This has changed since the previous answer was accepted. There is now a lookupFilter option to do this and it is much simpler. From https://stackoverflow.com/a/23239873/1204434, just add this to your list of options:

lookupFilter: function (suggestion, originalQuery, queryLowerCase) {
                return suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0;
            },

edited May 23 '17 at 11:47

Community

1
1

answered Apr 30 '15 at 03:36

felwithe

2,683
2
23
38

This appears to be for a different plugin – kjones Jan 23 '19 at 17:38

auto complete exact match from start using jquery autocomplete from simple array

5 Answers5