搜索和下拉框就像 facebook 聊天

Question

你好，我想创建一个带文本框的输入框，每当一个字母与你收到的字母匹配时，它就会在文本框下方创建一个下拉框，其名称与你在文本框中键入的文本相同。就像 facebook 聊天一样，用于将成员添加到聊天中。见图：

现在我知道如何进行搜索了，唯一的问题是，我选择隐藏每个选项然后显示它，这导致选项像这样显示（见图 2）如果你看第一张图片（Facebook 下拉框）你可以看到它附加到文本框，而我的只是显示在类型上的选项。有没有办法在不使用 select

的情况下连接这两个

到目前为止我的代码：

    $(document).ready(function () 
{
var searchBox = $(".search");

$("option").each(function () 
{
    $(this).hide();
});

searchBox.on('input', function () {
var searchBoxText = $(this).val().toLowerCase();

if(searchBox.length > 0)
{
    $(".person").each(function () 
    {
        var name = $(this).children(".name").text().toLowerCase();

        if(name.indexOf(searchBoxText) != -1)
        {
            $(this).show();
        }
        else 
        {
            $(this).hide();
        }
    });
}
else 
{
    $(".person").each(function () 
{
    $(this).hide();
});

}

});

});

Answer 1

现在已经解决了。

我发现自动完成功能非常棒。

任何偶然发现这个话题并有同样问题的人。

这是一个可能的解决方案：https://jqueryui.com/autocomplete/

搜索和下拉框就像 facebook 聊天

Search and dropdownbox like facebook chat

jquery

select

option

dropdown