javascript - 如何创建一个下拉菜单，选择后会更新输入字段？

Question

我有下面的代码来创建一个表单输入字段，用户可以像平常一样在其中输入搜索查询。但是，我也希望下拉选项成为此输入的一部分。我遇到的问题是，当用户从此下拉列表中选择一个选项时，输入字段中没有出现占位符文本，或者输入文本也不会更改以向用户显示他们刚刚从下拉列表中选择的内容。我尝试编写一个小脚本来检测是否选择了 li a 并相应地更新输入字段，但我有点卡住了。欢迎任何帮助。

    <form role="form">
        <div class="input-group">
            <div class="input-group-btn">
                            <input type="text" class="form-control" placeholder="Search">
                            <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                                <li class="input"><a href="#">black</a></li>
                                <li class="input"><a href="#">white</a></li>
                                <li class="input"><a href="#">red</a></li>
                                <li class="input"><a href="#">blue</a></li>
                                <li class="input"><a href="#">yellow</a></li>
                            </ul>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
            </div>
        </div>
    </form>

$('ul li a').on('select', function () {
     var selectedOption = $(this).find("placeholder").text();
     $(this).text(selectedOption);
})

Answer 1

这里有一个工作 jsfiddle

$('ul li a').on('click', function () {
     var selectedOption = $(this).text();

    $('.form-control').val(selectedOption);
})