下拉+用户输入（文本）

Question

嗨，大家好我四处看看，我真的没有得到一个非常好的答案。

所以我有一个下拉列表，允许我的用户选择他们居住的城市和东西。但是我想要它，以便该下拉菜单能够允许用户首先输入其值或从下拉列表中选择一个值。

这是我到目前为止所做的：

<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

您正在寻找新的HTML5 <datalist>元素：

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

当用户输入<input>时，数据列表中的选项会下拉。或者，双击会使整个列表丢失，就像选择一样。

See this JSFiddle for a demo