以編程方式使輸入[type = url]的數據列表以JavaScript形式出現

在Chrome中，至今只有在鍵入或雙擊input元素時纔會顯示Datalist，例如， http://jsfiddle.net/r7Y4v/以編程方式使輸入[type = url]的數據列表以JavaScript形式出現

我試圖讓數據列表出現得更快。理想情況下，我會在輸入旁邊放置一個「下拉箭頭」，點擊時會使Datalist出現。

我正在尋找一個webkit解決方案。

2013-04-21 brillout

您是否更早意味着您總是希望顯示的元素？ – 2013-04-21 16:54:11

並非總是如此，看到編輯 – brillout 2013-04-21 16:57:12

只需中繼（雙）點擊事件（如：'<按鈕的onclick = 「的document.getElementById（ 'input_id'）的onclick（）」>▼'）**沒有工作**無論是。 – GitaarLAB 2013-04-21 18:22:15

我在規範中找不到任何東西如何做到這一點。我還注意到，在當前瀏覽器中的實現看起來差異很大（單擊vs dbl-click，箭頭鍵，完整列表和過濾列表以及過濾器如何匹配部分輸入等）。

對我來說，現在看來，現在有仍然沒有正常工作的組合框和數據列表似乎是在它的嬰兒期。

因此，看起來你現在會更好地推出自己的或使用現成的圖書館。
在我看來'minimul datalist'圖書館是相當流行的（閱讀的好鏈接）。
在該頁面上是指向它的鏈接GitHub code和demo page。

附註：我很樂意有人給出更好的答案！此外，起初我認爲這是一個不錯的主意，省去了箭頭按鈕，這樣人們可以有更好的樣式選擇下拉按鈕，如果他們想要一個他們可以連接到datalist/autocomplete/combobox 。我很驚訝所有這些似乎還沒有明確說明，也沒有得到本地支持。請spec-writers給我們簡單的本地組合框（過期很久），然後添加像過濾器的香料！

編輯：有自2012年8月開放的功能要求上，要求一個下拉功能的Chromium項目：

Issue 152375: Add drop down toggle on input tag with datalist

來源

2013-04-21 17:37:23 GitaarLAB

我補充說，失敗的嘗試，以你的問題中留言。改變了我的答案的東西，可能是更多的使用給他人。 – GitaarLAB 2013-04-21 18:52:55

剛剛刪除評論，謝謝你的信息 – brillout 2013-04-21 22:58:32

@hakre：很棒的編輯，謝謝！ – GitaarLAB 2013-07-02 23:26:14

如何像這個？由於Chrome確實在懸停圖標上放置了一個圖標，因此我放置了該圖像以便它位於相同的位置。

input[list]{ 
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAB3RJTUUH3wMHFxkH6cbPfQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAABaSURBVHjaY2RgYDAA4jkMxIEsID6FLrgOiP8TwNNwmSgNxJ/xaDwPxGz4nJSDQ+MHIFYn5B9mqA3omsOJDA9w4P1B0jiTWI0wMIFYf2IDPEB8gxh/4jOAIAAAbfwl/FxzevIAAAAASUVORK5CYII='); 
background-repeat:no-repeat; 
background-position:right; 
background-origin: content-box; 
}

來源

2015-03-07 23:30:03

以編程方式使輸入[type = url]的數據列表以JavaScript形式出現

回答

相關問題