如何创建一个下拉列表，当选中该下拉列表时会更新一个输入字段？

Question

I have the below code to create a form input field which the user can type their search query into as normal. However, I also want to dropdown option to be part of this input. The problem I have, is that when the user selects an option from this dropdown, there is no placeholder text that appears in the input field or nor does the input text change to show the user what they just selected from the dropdown. I tried to write a small script which would detect if an li a was selected and it would update the input field accordingly but I am a bit stuck. Any help welcome.

    <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

Here you have an working jsfiddle

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

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

Answer 2

Try this code :

 $('#color-dropdown-menu li').click( function () {
$('.form-control').attr('placeholder',$( this ).text());

});

HTML :

<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>

CHECK IT