Question

I have this code :

<script type="text/javascript">
    var myList = [ "Avellino", "Enna", "Frosinone" ];

    $("#myTextBox").autocomplete({
        source: myList,
        appendTo: "#myOwnMenuProvince"
    });    
</script>

Now, if I digit e I’d like to see only words in the list that start with e, not that contain e. So, in the example above, only Enna.

How can I do it?

Answer 1

By default, the plugin uses the method $.ui.autocomplete.filter. This method does a grep using a regular expression on the label/value properties of the data and returns the filtered data. Let’s inspire ourselves from that to make our filtering.

To use your own filtering method, use the source option as a callback.

• the request parameter is an object containing one property term. It contains the text to search for, basically the value of the input field. So if you type “en” in the input field, request.term will have that value.

• the response parameter is a callback. You call it, passing the filtered data, to display the data, basically show the results popup menu.

So basically, you would filter your data and pass the filtered array to the `response´ callback.

Here’s one way to do it:

$("#myTextBox").autocomplete({
    source: function(request, response) {
        // filter your data
        var data = $.grep(myList, function(value) {
            return value.substring(0, request.term.length).toLowerCase() == request.term.toLowerCase();
        });
        // pass it to the response callback for display
        response(data);
    }
});​

DEMO