drop down + user input (text)

Question

Hi guys I've looked around and I haven't really gotten a really good answer on this.

So I have a drop down list that allows my users to pick which city they live in and stuff. However I want it so that that drop down has the ability to allow users to first type in their value first or select a value from the drop down.

Here is what I have so far:

<div class="atl_form_row">
    <div class="atl_left"><span class="mandatory">*</span>
        <label class="control-label atlFormLabel" for="Service City">Service City/County:</label>
    </div>
    <div class="atl_right">
        <select id="ServiceCity" name="ServiceCity">
            <option value "" disabled selected>Select City/County</option>
            <option value="Alpharetta">Alpharetta</option>
            <option value="Atlanta">Atlanta</option>
            <option value="Brookhaven">Brookhaven</option>
            <option value="Chamblee">Chamblee</option>
            <option value="Chattahoochee Hills">Chattahoochee Hills</option>
            <option value="College Park">College Park</option>
            <option value="Decatur">Decatur</option>
            <option value="Douglasville">Douglasville</option>
            <option value="Duluth">Duluth</option>
            <option value="Dunwoody">Dunwoody</option>
            <option value="East Point">East Point</option>
            <option value="Fairburn">Fairburn</option>
            <option value="Fulton County">Fulton County</option>
            <option value="Hapeville">Hapeville</option>
            <option value="Johns Creek">Johns Creek</option>
            <option value="Marietta">Marietta</option>
            <option value="Milton">Milton</option>
            <option value="Mountain Park">Mountain Park</option>
            <option value="Newnan">Newnan</option>
            <option value="Palmetto">Palmetto</option>
            <option value="Riverdale">Riverdale</option>
            <option value="Roswell">Roswell</option>
            <option value="Sandy Springs">Sandy Springs</option>
            <option value="Smyrna">Smyrna</option>
            <option value="Union City">Union City</option>
        </select>
    </div>
</div>';

Why don't you just make an input box and a dropdown and give the user a choice of using one or the other — Huangism
– Huangism, Commented Nov 12, 2014 at 18:51
Yea thats kind of what i have now....but its messy and i have to have 2 fields that kind of do the samething. I want to combine the input box and dropdown...any ideas? — zomdar
– zomdar, Commented Nov 12, 2014 at 18:52
I'm not sure what your goal here is, but dropdowns let you use your keyboard to select items already. Just highlight a dropdown and then type. It works for windows anyway, I can't say for linux or mac. — Radley Sustaire
– Radley Sustaire, Commented Nov 12, 2014 at 19:00

Jacob G · Accepted Answer · 2014-11-12 19:08:32Z

4

The new HTML5 <datalist> element is what you are looking for:

<input list="ServiceCity">
<datalist id="ServiceCity" name="ServiceCity">
            <option value "" disabled selected>Select City/County</option>
            <option value="Alpharetta">Alpharetta</option>
            <option value="Atlanta">Atlanta</option>
            <option value="Brookhaven">Brookhaven</option>
            <option value="Chamblee">Chamblee</option>
            <option value="Chattahoochee Hills">Chattahoochee Hills</option>
            <option value="College Park">College Park</option>
            <option value="Decatur">Decatur</option>
            <option value="Douglasville">Douglasville</option>
            <option value="Duluth">Duluth</option>
            <option value="Dunwoody">Dunwoody</option>
            <option value="East Point">East Point</option>
            <option value="Fairburn">Fairburn</option>
            <option value="Fulton County">Fulton County</option>
            <option value="Hapeville">Hapeville</option>
            <option value="Johns Creek">Johns Creek</option>
            <option value="Marietta">Marietta</option>
            <option value="Milton">Milton</option>
            <option value="Mountain Park">Mountain Park</option>
            <option value="Newnan">Newnan</option>
            <option value="Palmetto">Palmetto</option>
            <option value="Riverdale">Riverdale</option>
            <option value="Roswell">Roswell</option>
            <option value="Sandy Springs">Sandy Springs</option>
            <option value="Smyrna">Smyrna</option>
            <option value="Union City">Union City</option>
        </datalist>

As the user types in the <input>, the options from the datalist drop down. Or, a double click makes the whole list drop, like a select.

See this JSFiddle for a demo

edited Nov 12, 2014 at 19:08

answered Nov 12, 2014 at 18:55

Jacob G

14.2k4 gold badges50 silver badges67 bronze badges

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

6 Comments

zomdar Over a year ago

Yea this works fine thanks for the answer. However this doesn't fit in with my other fields (style wise) any idea on how i would be able to edit the style of this field? sorry if im coming off as a noob....i really am htough

Jacob G Over a year ago

The textarea or dropdown?

Jacob G Over a year ago

The textarea can be easily styled, but to style datalist, you have to use jquery ui :(

Billy Over a year ago

You can do a little styling, input[list] in css JSfiddle

Billy Over a year ago

just had a quick look around, There isn't much out there by way of styling datalists. If you really want a good solution then maybe jquery probably has a plugin or something to help. give me 2 minutes as I coded one for myself once, I'll have a look for it

|

Collectives™ on Stack Overflow

drop down + user input (text)

1 Answer 1

See this JSFiddle for a demo

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related