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

Answer 1

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