jquery - テキストボックスに入力した内容に一致する提案を含むドロップダウンリスト

Question

ドロップダウン リスト、テキスト ボックス、ボタンがあります。テキストボックスに単語を入力してボタンをクリックすると、ドロップダウンリストはテキストボックス内のその単語に従ってリスト項目を選択する必要があります。

例: 23 と入力すると、ドロップダウンには 23 から始まる項目が表示されます。

Answer 1

jQuery UIオートコンプリートは、必要なことを正確に実行し、さらに優れているようです。

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');基本的には、「 valueselectedの属性を持つすべてのオプション タグを見つけて、その属性を削除する」ということです。 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 で新しいオプション タグを選択しても競合しません。