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”键入内容;他不能简单地输入“酷”并将“酷酷的团队”作为选项出现。

我如何获取它以便用户可以键入他想要的任何内容，如果输入匹配可用下拉选项的任何子字符串，程序将提供下拉选项？换句话说，如果他输入“酷”或“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);
        });
    };
})();

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

1 个答案: