how to create input (type = text) which accepts values from select option?

Question

In html we create input box as input(type='text') and

<select>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel">Opel</option>
 <option value="audi">Audi</option>
</select>

How do you make a text box, which permits option only from options provided for, either thru (the select tag or otherwise). The idea is that the user can type the input rather than to have to choose from dropdown.

I can use typeahead. But how to confine inputs limited to typeahead options. Thru javascript? Is that the only solution?

In short you want Auto Complete Right :)

Moeed Farooqui
– Moeed Farooqui

2013-08-27 06:52:30 +00:00
Commented Aug 27, 2013 at 6:52 — Moeed Farooqui
– Moeed Farooqui, Commented Aug 27, 2013 at 6:52

sirhc · Accepted Answer · 2013-08-27 06:46:11Z

5

Chosen and Select2 are more suitable for this than typeahead:

answered Aug 27, 2013 at 6:46

sirhc

6,0872 gold badges28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Swagg Over a year ago

Amazing! Thanks! :) I was actually looking for the select multiple to tag option as well! Cheers

sirhc Over a year ago

No problem. I have run into this exact problem before, so I know your pain. :)

David Jones · Accepted Answer · 2013-08-27 07:07:04Z

2

Some great plugins were mentioned, but if you're looking for a more customizable solution, you could easily accomplish this with a few lines of jQuery. The following code will restrict the input to a pre-defined list of words (in this case, the list is defined in the HTML markup, but the list could also be implemented in the JavaScript). You could easily extend this solution to do exactly what you want. Here's a fiddle.

HTML

<input type="text" data-values="Volvo,Saab,Opel,Audi">

JavaScript

$("input").on("keyup", function() {
    var input = $(this).val();
    var values = $(this).data("values").split(",");
    var found = false;
    $(values).each(function(index, value) {
        if (value.toLowerCase().indexOf(input.toLowerCase()) > -1) {
            found = true;
        }
    });
    if (!found) {
        $(this).val($(this).val().slice(0,-1));
    }
});

edited Aug 27, 2013 at 7:07

answered Aug 27, 2013 at 7:01

David Jones

10.3k30 gold badges94 silver badges146 bronze badges

1 Comment

David Jones Over a year ago

No problem! Good luck on your project.

Prasanna Aarthi · Accepted Answer · 2013-08-27 06:54:09Z

0

you can do this with autocomplete,

   var givenoptions = ["Volvo", "Saab", "Opel", "Audi"]
   empty = "";

    $('#selecttext').autocomplete({
autoFocus: true,
source: givenoptions
 }).keyup(function() {
   var isValid = false;
   for (i in givenoptions) {
    if (givenoptions[i].toLowerCase().match(this.value.toLowerCase())) {
        isValid = true;
    }
}
if (!isValid) {
    this.value = empty
} else {
    empty = this.value;
}
});


 <input id="selecttext" />

answered Aug 27, 2013 at 6:54

Prasanna Aarthi

3,4514 gold badges29 silver badges48 bronze badges

Collectives™ on Stack Overflow

how to create input (type = text) which accepts values from select option?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related