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)

Refrences

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

Answer 2

如果我理解您的问题，您的答案是<datalist> controll

这是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';
     });

 });

我想创建自动完成选择框

4 个答案: