javascript - 下拉+用户输入(文本)

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