CODEWITHSUNDEEP
javascriptjqueryformsjquery-autocomplete
goelv
goelv

Reputation: 2884

Autocomplete for Text Input Recognizes Substring of Input - Javascript

I have the following code in javascript:

    <form id="date_form" onsubmit="return displayDate();">
        <datalist id="dates">
            <select id="select">
                <option value='Team Cool'>Team Cool</option> 
                <option value='Team Awesome'>Project Awesome</option> 
            </select>
        </datalist>
        <input type="text" name="team" value="" id="team" list="dates">
        <input type="submit" class="submitButton" value="choose team">
    </form>

When a user tries to enter something in the input field, he must begin typing with "Team" if he wants to see "Team Cool" as a dropdown option; he cannot simply type "cool" and have "Team Cool" appear as an option.

How do I get it so that the user can type anything he wants and the program will provide dropdown options if the input matches any substring of the available dropdown options? In other words, if he types "cool" or "ool" or "ol", I want the program to provide a dropdown for "Team Cool".

Thanks!

Upvotes: 2

Views: 921

Answers (1)

Jain
Jain

Reputation: 1249

Try to some customization in jQuery Autocomplete:

(function() {
    var manufacturers = ['Volkswagen', 'Audi', 'Mercedes', 'Skoda', 'Toyota', 'Renault', 'Volvo', 'Mazda'];

    $("#list").autocomplete({
        source: manufacturers
    });

    // Overrides the default autocomplete filter function to search only from the beginning of the string
    $.ui.autocomplete.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);
        });
    };
})();

Upvotes: 1

Related Questions