如何通過HTML下拉菜單或選擇元素實現自動完成功能？

Question

嗨我正在嘗試爲下拉菜單創建auto completion功能，或者選擇 html表單元素。

我需要一個功能，例如用戶一旦開始typing根據它的match able元素將狀態正佳的特定下拉/選擇項目所選元素來拿出一個drop-down/select元素。

任何人有任何想法我怎麼做到這一點？

Answer 1

你可以使用jQuery select2插件。它只是使HTML選擇框自動完成：Select2

<link 
href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" 
rel="stylesheet" /> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
<script 

src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"> 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(".js-example-basic-multiple").select2(); 
}); 
</script> 

<select class="js-example-basic-multiple" multiple="multiple"> 
    <option value="AL">Alabama</option> 
    <option value="WY">Wyoming</option> 
</select> 

Answer 2

你可以嘗試自動完成下拉HTML <datalist>標籤。 Try here。

<form action="/action_page.php" method="get"> 
    <input list="browsers" name="browser"> 
    <datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
    </datalist> 
    <input type="submit"> 
</form> 

如果你不想在下拉或未選擇的下拉菜單中添加一個默認值，然後從輸入標籤刪除value屬性。

Answer 3

有很多選擇，我已經使用了Selectize.js和Select2。我發現Select2更好，更易於使用，而且重量輕！也很容易與Ajax調用更新（例如：搜索城市，國家，用戶等）

鏈接：http://selectize.github.io/selectize.js/

收銀臺下面的例子：

$(function() { 
 
    $('select') 
 
    .select2({ 
 
     placeholder: 'type now...', 
 
     width: '200', 
 
     multiple: true, 
 
     data: [{ 
 
     id: 'A & A, LLC.', 
 
     text: 'A & A, LLC.' 
 
     }, { 
 
     id: 'testing1', 
 
     text: 'testing1' 
 
     }, { 
 
     id: 'testing 1,2,3', 
 
     text: 'testing 1,2,3' 
 
     }], 
 
     tokenSeparators: ['|'] 
 
    }) 
 
    .on('change', function() { 
 
     console.log($(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" /> 
 

 

 

 
<select></select>

Answer 4

使用引導最簡單的可搜索下拉列表：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> 
 
<select class="selectpicker" data-live-search="true" > 
 
    <option>Alabama</option> 
 
    <option>Alaska </option> 
 
    <option>Arizona </option> 
 
    <option>Arkansas </option> 
 
    <option>California </option> 
 
    <option>Colorado </option> 
 
    <option>Connecticut </option> 
 
    <option>Delaware </option> 
 
    <option>Florida </option> 
 
    <option>Georgia </option> 
 
    <option>Hawaii </option> 
 
    <option>Idaho </option> 
 
    <option>Illinois Indiana </option> 
 
    <option>Iowa </option> 
 
    <option>Kansas </option> 
 
    <option>Kentucky </option> 
 
    <option>Louisiana </option> 
 
    <option>Maine </option> 
 
    <option>Maryland </option> 
 
    <option>Massachusetts </option> 
 
    <option>Michigan </option> 
 
    <option>Minnesota </option> 
 
    <option>Mississippi </option> 
 
    <option>Missouri </option> 
 
    <option>Montana Nebraska </option> 
 
    <option>Nevada </option> 
 
    <option>New Hampshire </option> 
 
    <option>New Jersey </option> 
 
    <option>New Mexico </option> 
 
    <option>New York </option> 
 
    <option>North Carolina </option> 
 
    <option>North Dakota </option> 
 
    <option>Ohio </option> 
 
    <option>Oklahoma </option> 
 
    <option>Oregon </option> 
 
    <option>Pennsylvania Rhode Island </option> 
 
    <option>South Carolina </option> 
 
    <option>South Dakota </option> 
 
    <option>Tennessee </option> 
 
    <option>Texas </option> 
 
    <option>Utah </option> 
 
    <option>Vermont </option> 
 
    <option>Virginia </option> 
 
    <option>Washington </option> 
 
    <option>West Virginia </option> 
 
    <option>Wisconsin </option> 
 
    <option>Wyoming</option> 
 
</select> 
 

 

 

 

 

 
<!-- Post Info --> 
 
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'> 
 
    Find documentation: 
 
    <a href='http://getbootstrap.com/css/'> 
 
     Get Bootstrap 3 
 
    </a><br/> 
 
    Fork This Skeleton Here: 
 
    <a href='http://jsfiddle.net/KyleMit/kcpma/'> 
 
     Bootstrap 3 Skeleton 
 
    </a><br/> 
 
</div>