下拉列表，其中的建议与您在文本框中键入的内容相匹配

Question

我有一个下拉列表，一个文本框和一个按钮。如果我在文本框中键入单词并单击按钮，则下拉列表应根据文本框中的该单词选择列表项。

例如：如果我输入23，则下拉列表应列出从23开始的项目。

Answer 1

jQuery UI Autocomplete似乎完全符合您的需求，甚至更好。

Answer 2

@GG。使用jQuery UI是一个更好的选择，但这是一个非常简单的工作模型，不使用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 UI自动完成功能的新jsfiddle：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选择一个新的选项标签时，它不会发生冲突。