How to filter your jquery autocomplete data while typing

Question

So far I have the following

var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa'];

$('#my-input').autocomplete({
    source:aCleanData,
    minLength:2
});

Currently if you type aa , aaa,aab,faa,maa will show.

What I would like to do is when the user types ff the data that is shown will be the fff,ffb data.

Basically, only what is typed should be matched from the first character onwards.

This should be recursive. When user types fg , fff,ffb should disapear and only fgh should appear.

Thanks in advance for your help.

UPDATE:

ps See what I mean here:

http://jqueryui.com/demos/autocomplete/#default

Type sc and you'll see more than just the data beginning with sc.

Answer 1

One possible solution to get only results starting with the input value is to check the array elements before search by yourself:

var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa'];
$('#my-input').autocomplete({
    source: aCleanData,
    minLength: 2,
    search: function(oEvent, oUi) {
        // get current input value
        var sValue = $(oEvent.target).val();
        // init new search array
        var aSearch = [];
        // for each element in the main array ...
        $(aCleanData).each(function(iIndex, sElement) {
            // ... if element starts with input value ...
            if (sElement.substr(0, sValue.length) == sValue) {
                // ... add element
                aSearch.push(sElement);
            }
        });
        // change search array
        $(this).autocomplete('option', 'source', aSearch);
    }
});

Also see my jsfiddle .

Answer 2

After looking at the source for autocomplete, you have a few options. You could write your own pasrer method that returns what you need and set it as the callback source. This is probably the more "correct" way to do it.

The faster way is to simply add the following line AFTER you include the ui source:

$.ui.autocomplete.escapeRegex=function(){ 
    return '[^|\s]' + $value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");   
};

If you care how this works (or should work, I have not tested):

The original code extends the ui.autocomplete with 2 static functions:

$.extend( $.ui.autocomplete, {
escapeRegex: function( value ) {
    return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
},
filter: function(array, term) {
    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
    return $.grep( array, function(value) {
        return matcher.test( value.label || value.value || value );
    });
}
});

All you should need to do is change what escapeRegex returns to search for the beginning if words only. By setting the value of escapeRegex to return '[^|\\s]' in front of the original return, we are saying "Look for the work with a space in front or is the beginning of a line"

Answer 3

I think you use the jQuery UI - Autocomplete . The one searching type is not the same way that you want to do. But this one is may be cover for your need.

Answer 4

Simply way you can use this technique :

    const autocompleteFilter = function( request, response ) {
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( <array>, function( item ){
                return matcher.test( item );
            }) );
        };

    $("#From").autocomplete({
        source: autocompleteFilter,
        select: function(event, selectedItem) {
            selectedItem = splitValue(selectedItem.item.value, 3);
            if (selectedItem) {
                return selectedItem.text;
            } else 
                return false;
        },
    });