如何創建一個下拉菜單，當選擇更新輸入字段時？

Question

我有下面的代碼來創建一個表單輸入字段，用戶可以正常鍵入他們的搜索查詢。不過，我也希望將下拉選項作爲此輸入的一部分。我遇到的問題是，當用戶從此下拉列表中選擇一個選項時，沒有佔位符文本出現在輸入字段中，或者輸入文本也不會更改以向用戶顯示他們剛剛從下拉列表中選擇的內容。我試圖編寫一個小腳本來檢測是否選擇了li，它會相應地更新輸入字段，但我有點卡住了。任何幫助歡迎。

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

Answer 2

試試這個代碼：

$('#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