jquery - 包含与您在文本框中键入的内容相匹配的建议的下拉列表

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');基本上是说，“找到所有具有 value 属性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 选择一个新的选项标签时，它不会发生冲突。