如何創建一個下拉菜單，以接受來自文本字段的輸入並顯示文本位置

Question

我正在創建一個下拉菜單，接受像普通文本字段這樣的輸入並顯示文本的位置。 為此，我創建了一個下拉列表和一個文本字段，並在文本字段下隱藏了下拉列表。 現在，我想編寫一個Jquery，它將從文本字段中獲取輸入並與下拉列表進行匹配，如果存在匹配項，則從下拉列表中顯示選項。 可能嗎？

Answer 1

您可以嘗試使用自動完成下拉菜單。 請參閱此鏈接： http : //www.c-sharpcorner.com/UploadFile/ca3292/autocomplete-dropdown-using-jquery-with-C-Sharp/

Answer 2

檢查這個例子

JS：

var options=["First","Second"];
$("#data").on('keyup',function(){
    var v = $(this).val();
    $("#options").html("");
    $.each(options,function(index){
        if(options[index].indexOf(v) > -1){
            $("#options").append("<li>"+options[index]+"</li>");
        }
    })
})

**有更好和更有效的方法可以執行此操作，您可以以此為例開始。

Answer 3

這是你的：

HTML

Textbox: <input type="text" /><br />
Text and position: <span></span>
<select style="display: none;">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="vw">VW</option>
    <option value="audi" selected>Audi</option>
</select>

JQUERY

$("input").on('change keyup paste', function(){
    var theInput = this;
    $.each($("select option"), function(index, option){
        if ($(option).val().toLowerCase().trim() == 
            $(theInput).val().toLowerCase().trim()){
            var textToShow = $(option).val().trim() + " " + Number(index + 1);
            $("span").text(textToShow);
            $("select").val($(theInput).val().toLowerCase().trim());
        } else {
            $("span").text("");
        }
    });
});

https://jsfiddle.net/L000qqr9/1/

Answer 4

這也是另一個快速的例子

http://codepen.io/anon/pen/LVebbr

 var $inputField = $('#inputText'), $dropdown = $('.dropdown'); $inputField.on('keyup', function(){ var _value = $(this).val(); $dropdown.children('li').each(function(){ ( $(this).html().indexOf(_value) > -1 ) ? $(this).css('opacity', '1') : $(this).css('opacity', '0'); }); }); 

 .dropdown li{ opacity:0 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="text" id="inputText" /> <ul class="dropdown"> <li>op1</li> <li>op2</li> <li>op3</li> <li>op3</li> </ul>