javascript - 文本输入的自动完成识别输入的子字符串 - Javascript

Question

我在 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>

当用户试图在输入字段中输入内容时，如果他想看到“Team Cool”作为下拉选项，他必须以“Team”开始输入；他不能简单地键入“cool”并让“Team Cool”作为选项出现。

我如何获得它以便用户可以键入他想要的任何内容，并且如果输入与可用下拉选项的任何子字符串匹配，程序将提供下拉选项？换句话说，如果他输入“cool”或“ool”或“ol”，我希望程序提供“Team Cool”的下拉列表。

谢谢!

Answer 1

尝试在 jQuery 自动完成中进行一些自定义:

(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);
        });
    };
})();