搜索和下拉框，如 Facebook 聊天答案

【问题标题】：Search and dropdownbox like facebook chat搜索和下拉框，如 Facebook 聊天
【发布时间】：2016-06-05 19:51:48
【问题描述】：

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

现在我知道如何使搜索工作，唯一的问题，我选择隐藏每个选项然后显示它，这导致选项显示如下（见图 2）如果你看第一张图片（Facebooks下拉框）您可以看到它附加到文本框，而我的只是在类型上显示的选项。无论如何都可以在不使用选择的情况下连接这两个

到目前为止我的代码：

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

}

});

});

【问题讨论】：

为了更好地理解我希望你在这里发布你的代码。

标签： jquery select option dropdown

【解决方案1】：

现在解决了。

我发现自动完成功能很有魅力。

任何偶然发现此主题并有相同问题的人。

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

【讨论】：