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似乎做的正是你所需要的，甚至更好。