0

I currently have a form with some fields and a simple dropdown where you can choose an options from a list of options.

Here's the code of the dropdown:

<select name="typeOfTokens" required="required">
    <option value="1">Samsung</option>
    <option value="2">Sony</option>
    <option value="3">Android</option>
</select>

What I would like to achieve is to let the user search through that list from a text input, I have seen a couple of times a dropdown with a text input at the top. And if there where no matches, then let the user choose whatever he typed, and then take the selected value from the options or whatever is on the text input when submitting the form.

I've seen a couple of dropdown plugins, like "chosen" or "select2" but I didn't find anything really usefull, unless I missed something from the docs.

If anyone could help me out I'll be very gratefull!

Fer VT
  • 500
  • 1
  • 8
  • 25
  • So you want a search engine so-to speak? – Muntasir Alam Aug 25 '16 at 17:18
  • You can show a positioned textfield over the first option if it was selected, hide it when some other option is selected. Positioning in different browsers is challenging though. – Teemu Aug 25 '16 at 17:19
  • why not jqueryui autocomplete https://jqueryui.com/autocomplete/ – depperm Aug 25 '16 at 17:23
  • Is something like this,similar to what you need ? http://jsfiddle.net/bhavuksuthar/vc7yc2a7/ – Muntasir Alam Aug 25 '16 at 17:23
  • 1
    Possible duplicate of [HTML combo box with option to type an entry](http://stackoverflow.com/questions/14614702/html-combo-box-with-option-to-type-an-entry) – chiliNUT Aug 25 '16 at 17:25
  • @MuntasirAlam Yes, just like that, but only allow one selection. – Fer VT Aug 25 '16 at 17:28
  • What do you mean only allow one selection? I'm a bit confused on the question sorry. After I know what you mean I can post the code below. – Muntasir Alam Aug 25 '16 at 17:30
  • nice solution in this 'off-topic' marked topic https://stackoverflow.com/questions/15992085/html-select-drop-down-plugin-with-an-open-text-input-field – RST Aug 25 '16 at 17:48

1 Answers1

1

Have a look at the combo box provided by Kendo UI. It lets you to select items from the list or to type a new item. I have created a sample demo here - Combobox Demo

If you are new to Kendo, it's has got a core version which is free and has support for lot of widgets including ComboBox

Kendo UI Core

Getting started with Kendo ComboBox

Amal Dev
  • 1,938
  • 1
  • 14
  • 26