HTML選擇標籤自動完成

我得到了一些選擇標記，如下所示：HTML選擇標籤自動完成

<select id="fruits"> 
    <option value="1">Apple</option> 
    <option value="2">Banana</option> 
    <option value="3">Orange</option> 
    <option value="4">Grapes</option> 
    <option value="5">Ginger</option> 
</select>

我想要做的是，每當用戶專注於select，和他的點擊在他的鍵盤鍵「G」選項「Grapes」將被自動選擇，並且當他再次按下「G」時，將會選擇「Ginger」等等。

我不知道該怎麼做。

來源

2013-08-18 kfirba

本已對發生在IE和Chrome，不知道Firefox的選擇框，因爲我沒有它安裝。 –

我認爲這是下拉（選擇控制）的默認操作。你必須努力實現它。

試試這個JSbin ..有一個選擇框，當用戶第一次在鍵盤上grapes is selected按下g和第二ginger is selected

http://jsbin.com/UYeZaPA/1/edit

來源

2013-08-18 17:56:55 Amith

組合框是一個UI控件，它是下拉菜單（這是HTML中的select）和文本輸入（文本類型的輸入）的組合（因此是名稱）。 HTML沒有任何以組合框表示的本機控件。 – Quentin

但有時候，它只是不起作用。我可以按鍵超過10次，並且不會跳到帶有該起始字母的實例 – kfirba

@Quentin：感謝兄弟爲我糾正錯誤。我已經更新了我的答案:) – Amith

這需要沒有要作出努力。在任何瀏覽器中自己嘗試一下。瀏覽器默認爲你做。嘗試在Chrome或任何當前瀏覽器

如：Facebook頁面註冊形式：

只需選擇月份，按下J

首先它會顯示月

在第二次按J它會顯示6月 ..等等

來源

2013-08-18 18:02:45 Rahul

DEMO

你要求的是下拉列表的默認功能。

如果你想搜索下拉列表，你可以試試這個插件。

jQuery Searchable DropDown Plugin Demo

DEMO - with your code

$('#fruits').searchable();

你也可以嘗試DEMO

來源

2013-08-19 02:01:45

[jQuery Searchable DropDown Plugin Demo]（http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/）> *本網站可以沒有達到'ERR_NAME_NOT_RESOLVED' * – Pang

好吧，如果你想自動完成功能添加到您的HTML選擇元素，則沒有什麼比selectize.js更好

您只需將其css和js文件包含在p中roject或者你可以使用cdns。

前往Selectize網站here

來源

2016-11-05 09:25:03

HTML選擇標籤自動完成

回答

相關問題