javascript - 我想创建自动完成选择框

Question

我的html代码是：

<select class="form-control" id="city" style="width:100%; margin-left:2%;">
        <option>Sonal</option>
        <option>abcd</option>
        <option>3</option>
        <option>4</option>
        <option>aaaa</option>
    </select>

我想要什么：如果我想选择 abcd。然后会有两种选择方法。

• 首先单击下拉菜单并选择一个选项。

• 第二次在选择框中键入一个键，然后相关的答案将被过滤。

  例如：当我们在选择框中键入“a”时，必须在下拉列表中过滤两个选项。

  1.abcd 2.aaaa

Answer 1

看看这些演示小提琴

Demo fiddle1和这个Demo Fiddle 2

想法是使用具有过滤器文本的选项重新绑定选择列表中的值。

$('<option>').text(option.text).val(option.value).attr('rel', option.rel)

参考文献

http://dragonfruitdevelopment.com/filter-a-select-menu-with-jquery/

Answer 2

如果我理解你的问题，你的答案是<datalist>可控的

这是 w3 的一个例子

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

它是用户可以写入的输入和下拉菜单的组合，并且下拉菜单被过滤...

Answer 3

您可以使用jQuery Autocomplete，它为任何解决方案提供了所有灵活性。

Answer 4

/*This is a generical editable select, with a function can control all editableselect in a html or php page */  

//html
<input type="text"  name="maquina" id="maquinain" syze="30"/>
<input type="button" class="btnselect" id="maquina" value="v"/>
<div class="select" id="maquinadiv">
    <div class="suggest-element" id="something">something</div>
    <div class="suggest-element" id="something1">something1</div>
    <div class="suggest-element" id="something2">something2</div>
    <div class="suggest-element" id="something3">something3</div>

</div>

//css

        .suggest-element{
            margin-left:5px;
            cursor:pointer;
        }
        .select {
            position:absolute;
            z-index: 100;
            width:350px;
            border:1px solid black;
            display:none;
            background-color: white;
        }

//javascrip-jquery

$('.btnselect').click(function(){

    //get input and div
    var inp = $(this).attr('id')+"in";
    var div = $(this).attr('id')+"div";

    //show the div
    document.getElementById(div).style.display = 'block';

    //click in select
    $('.suggest-element').click(function(){
        //get id of the click element
        var id = $(this).attr('id');
        //Edit the input with the click element data
        document.getElementById(inp).value=id;
        //hide the div
        document.getElementById(div).style.display = 'none';
     });

 });