Dropdownlist的建議與您在文本框中輸入的內容相匹配

Question

我有一個下拉列表，一個文本框和一個按鈕。如果我在文本框中鍵入單詞並單擊按鈕，則下拉列表應根據文本框中的單詞選擇列表項目。

例如：如果鍵入23，然後在下拉列表應該在項目開始23

Answer 1

@GG。是使用jQuery UI一個更好的選擇，但這裏沒有使用的用戶界面非常簡單的工作模式：http://jsfiddle.net/flackend/MA95K/2/

HTML：

<input type="text"> 
<input type="button" value="Button"> 
<select> 
    <option>20</option> 
    <option>21</option> 
    <option>22</option> 
    <option>23</option> 
</select>​ 

的jQuery：

$('input[type="button"]').on('mousedown', function() { 

    var search_str = $('input[type="text"]').val() 

    $('option[selected="selected"]').removeAttr('selected'); 

    $('option').each(function() { 
     if($(this).text() == search_str) 
     { 
      $(this).attr('selected', 'selected'); 
      return false; 
     } 
    }); 
});​ 

---

編輯

這是一個新的使用jQuery的jsfiddle UI的自動完成：http://jsfiddle.net/flackend/rPGUy/1/

---

編輯

$('option[selected="selected"]').removeAttr('selected');基本上是說，「發現有與值selected屬性selected，如果有任何所有的選項標籤，並刪除該屬性。 「

所以這一點，例如：

<select> 
    <option>20</option> 
    <option selected="selected">21</option> 
    <option>22</option> 
    <option>23</option> 
</select> 

會變成這樣：

<select> 
    <option>20</option> 
    <option>21</option> 
    <option>22</option> 
    <option>23</option> 
</select> 

所以，現在當我們的jQuery選擇一個新的選項標記也不會發生衝突。

Answer 2

jQuery UI Autocomplete似乎做的正是你所需要的，甚至更好。