CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sonal
sonal

Reputation: 69

I want to create autocomplete select box

My html code is:

<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>

What i want: If i want to select abcd. Then there will be two type of selection method.

Upvotes: 2

Views: 8243

Answers (4)

Adnan
Adnan

Reputation: 179

You can use jQuery Autocomplete which gives all the flexibility for any solution.

Upvotes: 0

bedecamp
bedecamp

Reputation: 1

/*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';
     });

 });

Upvotes: 0

Ivan Pavić
Ivan Pavić

Reputation: 538

If I understand your problem your answer is <datalist> controll

here is an example from w3

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

it is a combination of an input and a dropdown menue in wich user can write in and dropdowns are filtered...

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Have a look at these demo fiddles

Demo fiddle1 and this Demo Fiddle 2

The idea is to rebind the values in the select list with the option having the filter text.

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

Refrences

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

Upvotes: 1

Related Questions