下拉+用户输入（文本）

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> ，数据<input>中的选项将下拉。 或者，双击会使整个列表下降，就像选择一样。

看到这个JSFiddle的演示