如何创建一个下拉菜单，以接受来自文本字段的输入并显示文本位置

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>