啓用Safari/Opera上的datalist的腳本

我犯了一個使用html特性而不先查找的恐怖錯誤，而且，當我離開部署網站幾個小時時，我意識到Safari並沒有有數據列表的支持...啓用Safari/Opera上的datalist的腳本

http://caniuse.com/#search=datalist

這是因爲觀衆的很大一部分用於這個特定的網站相當麻煩的事情包括技術上和受損，因此，我希望野生動物園構成30-網站訪問量的50％。

現在，我可以看到如何使用JavaScript編寫用於datalist的簡單多邊形填充，以便我可以只包含一個腳本標記並無痛地擺脫問題，而無需填充整個html，但是我無法找到說的JavaScript。

我不是在要求你們寫信，如果我想浪費一大堆時間，我可以明顯地做到這一點。我希望你們知道這是一個真正考驗過的圖書館，因爲我的愚蠢和憤怒似乎無法找到。

在任何人在這個問題上評論，是的，這是愚蠢的我不要做並行測試Safari上考慮多達一半的用戶可以從那裏來的...但事後看來是20-20

編輯：我應該提到，我發現了兩個插件，可悲的是，現代化依賴於Jquery &，這實際上是我不想承擔的那種依賴。

編輯：有人將這個問題標記爲重複，沒有明顯的閱讀問題。因此，我會重申我的問題：

我想要一個爲Safari/Opera mini填充數據列表的JavaScript腳本。現在，讓我們通過這些條款，我們將：

- > Javascript！= Hmtml - > polyfill：https://en.wikipedia.org/wiki/Polyfill讓我TL; DR：允許您實現瀏覽器不支持的功能。

- > datalist：允許用戶在輸入元素中動態輸入單詞，並從下拉列表中建議自動完成。它看起來像這樣：

<body> 
Choose: <input type="text" list="languages"> 
<label for="languages"> 
    <datalist id="languages"> 
     <option value="JavaScript"></option> 
     <option value="Haskell"></option> 
     <option value="Ruby"></option> 
     <option value="Go"></option> 
     <option value="Python"></option> 
     <option value="etc"></option> 
    </datalist> 
</label>

https://jsfiddle.net/a5o2cna3/

問題與對方的回答是：一）它以HTML編輯，它不是一個JavaScript您插入怕疼，並允許其他人閱讀代碼沒有去：他媽的是什麼？ b）它用一個select元素替換datalist。它可以服務於相同的目的，如果您不希望用戶輸入除預定義選項以外的其他任何內容，如果您不關心該元素是如何可視化的，並且如果您不關心這樣一個事實，用戶必須從列表中選擇（非常煩人的移動）。

這是所提出的解決方案是如何工作的（那個在「重複」的問題）：

<body> 
Choose: <input type="text" list="languages"> 
<label for="languages"> 
    <select id="languages"> 
     <option value="JavaScript">JavaScript</option> 
     <option value="Haskell">Haskell</option> 
     <option value="Ruby">Ruby</option> 
     <option value="Go">Go</option> 
     <option value="Python">Python</option> 
     <option value="etc">etc</option> 
    </select> 
</label>

https://jsfiddle.net/vv63pptj/

所以，這個問題確實相似，但其類似於WASN」問題我從來沒有解決過我想要的解決方法，而不是「necro bumping」（甚至不知道它是否可能）。

現在，爲了舉例說明，我想什麼（在GitHub上一些挖掘後發現的）：

https://github.com/Fyrd/purejs-datalist-polyfill

- >無外部依賴性，只有幾百行的js和css - >可以是簡單地包含在html中，它使現有的數據專家工作，而不會損壞html。- >使輸入元素在safari和opear mini上的行爲與其在firefox，chrome和android瀏覽器中的行爲相同。它提供了相同的功能並且看起來相同。它不是「這將取代元素具有不同的行爲，但經常用於類似的情況」它的一個「這與JavaScript不支持它的瀏覽器模仿你的元素」

我將這個答案發布到類似的問題，以防人們閱讀時想要另一種選擇。但我想盡可能清楚地解釋爲什麼這不是重複的，因爲它被問到我。

來源

2016-11-19 George

請參閱此處的解決方法：http://stackoverflow.com/questions/27494084/html5-datalist-tag-is-not-populating-in-safari –

檢查https://jqueryui.com/autocomplete/ .. you只需要包含jquery源文件..這就是全部...... – repzero

@Tim它是一種解決方法，將元素替換爲具有不同行爲的元素，而不是我所要求的。 – George

的回答我的問題被發現挖掘在GitHub上了一下：

https://github.com/Fyrd/purejs-datalist-polyfill

基本上是一個簡短而親切的.js和.css，你可以在HTML和它使datalists鏈接輸入行爲Safari瀏覽器和Opera Mini上的功能與Chrome，Firefox和Android Browser上的功能相同。

來源

2016-11-19 22:00:28 George

啓用Safari/Opera上的datalist的腳本

回答

相關問題