Question

希望你能提供帮助，

我正在尝试根据输入字段的值创建一个“简单”的自动完成/标记建议类型的函数。

示例：用户在输入字段中键入“hello world”，我想要做的是change匹配字符串，因为它们是针对列表（预定义）键入的，因此列表可能是{{1 }或<ul>等

习题没有必要超越前2或3个字符，事实上真的只是第一个会做的 - 所以在示例“hello world”中，列表可能包含“hello world，hi world，help world，a world，another世界，因为世界......“

因此，如果我输入h作为输入中的第一个字母，我会在<select>或<ul>列表中看到 - 放在输入字段之后所以可以使用<select>是“你好世界，嗨世界，帮助世界“。

同样，如果我打字，我会看到“一个世界，另一个世界”。我希望清楚吗？概率。是找不到任何教程。

提前致谢

Answer 1

从头开始创建并不困难。这是我几周前开始工作的部分解决方案，欢迎您加入：

标记：

<input type="text" />
<div id="results">
    <ul>
        <li>Cartman</li>
        <li>Snooker</li>
        <li>Star Wars</li>
        <li>Blue Velvet</li>  
    </ul>
</div>

$(document).ready(function() {
    $("#results").hide();
    $("input").keyup(function() {
        if (this.value.length) {
            var that = this;
            $("#results li").hide().filter(function() {
                return $(this).html().toLowerCase().indexOf(that.value.toLowerCase()) !== -1;
            }).show();
            $("#results").show();
        } else {
            $("#results").hide();
        }
    });
});

Try it out here.

Answer 2

jQuery UI Autocomplete小部件以健壮的方式支持自动填充。但是，您必须定义一个回调函数来进行过滤，这非常简单。

如果您点击this particular demo上的“查看来源”，则会显示如何使用Regexp和jQuery grep功能进行过滤。

这应该让你开始;剩下的就是从<ul>的子元素上的jQuery选择器构建该列表。

Answer 3

您正在寻找jquery auto complete插件。

JQuery逐字符搜索

3 个答案: