CODEWITHSUNDEEP
javascripthtml
Rajarshi Sarkar
Rajarshi Sarkar

Reputation: 199

how to create a textbox in a list (HTML)

I want to have a list in HTML (single selection) which will have -

  1. A textbox to enter text.
  2. List of options from which user can select any one option.

What I want is - a list with a textbox as an option.

The basic list syntax in HTML goes like - 

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

while the basic textbox syntax in HTML goes like -

<input type="textbox" name="first">

Kindly help, as nesting the textbox syntax inside the list syntax doesn't produce the desired result.

Upvotes: 0

Views: 2651

Answers (1)

OlivierH
OlivierH

Reputation: 3890

You won't be able to do it this way with a standard select element.

You can use UI javascript librairies to use custom controls. What you need here is generally called an autocomplete.

This control is a mix between a combobox and a text input. You can select an option with mouse as you would do with a classic select, but you are also able to use keyboard to filter results.

Here is an example of what I'm talking about. This is the jQuery UI library's demos page. You can see here an autocomplete in action. The demo I linked has no clickable button to display the options list. Have a look at combobox demo.

Playing with this, you will be able to have a combobox in which you will be able to type custom values.

There is many libraries like this one available on the net. Here is a wikipedia list.

Upvotes: 1

Related Questions