我想使用HTML5 datalist屬性，沒有JQuery的自動完成下拉菜單。但是我希望每個建議在被選中時都會轉到特定的鏈接（或者按下回車鍵，進入第一個建議）。自動完成下拉菜單沒有jQuery鏈接

我有現在的問題是：

<form action="www.site.com/search?q=" method="get"> 

<input name="q" type="text" id="txtAutoComplete" list="languageList"/> 

    <datalist id="languageList"> 

    <option value="OPTION1" /> 
    <option value="OPTION2" /> 

    </datalist> 

</form>

在這種情況下，它執行站點搜索。我希望每個選項都可以打開特定鏈接，或者在鏈接http://www.hitsebeats.ninja/search/label/VALUE_HERE末尾使用值，該鏈接會轉到Blogger中的正確標籤。在這最後一種情況下，我想加入事件onclick：

<datalist id="languageList" onclick='location=this.options[this.selectedIndex].value;> 

    <option value='http://www.hitsebeats.ninja/search/label/OPTION1'> 
    OPTION1 
    </option> 

</datalist>

但是沒有成功。

來源

2016-03-11 Henrique Barcelos

在評論中的OP反饋之後添加另一個答案。只有在類型選項存在於數據列表中時，這應該重定向。

<script> 
    function redirect(value) { 
     var options = document.getElementById("languageList").options; 

     for(var i = 0; i < options.length; i++) { 
      if (options[i].value == value) 
       window.location='http://www.example.com/' + value; 
     }; 
    } 
</script> 
<form action="http://www.example.com/search?q=" method="get"> 
    <input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="redirect(this.value)" /> 

    <datalist id="languageList"> 
    <option value='OPTION1'>OPTION1</option> 
    <option value='OPTION2'>OPTION2</option> 
    </datalist> 
</form>

第一次嘗試

在input元素上使用oninput你可以根據你選擇什麼樣的選項來改變位置。

<form action="http://www.example.com/search?q=" method="get"> 
    <input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="window.location='http://www.example.com/' + this.value" /> 

    <datalist id="languageList"> 
    <option value='OPTION1'>OPTION1</option> 
    <option value='OPTION2'>OPTION2</option> 
    </datalist> 
</form>

告訴我，如果這是你所期望或沒有。

來源

2016-03-11 13:19:28

這個想法看起來不錯，但是這使得任何字母輸入觸發'oninput'，這沒有給用戶足夠的時間來選擇和選擇或完成打字。 –

@HenriqueBarcelos是的，忘記了......然後onchange是你最好的選擇。但它只會在你失去對輸入元素的注意力時觸發（點擊） –

皮埃爾，我正要寫它。感謝最初的幫助。我管理它onchange更改onchange。它解決了一切。但另一個麻煩出現了。如果用戶沒有選擇一個選項，他們輸入的內容將會覆蓋該鏈接，並且不會發生。標籤區分大小寫，並且應該與**值**完全相同。無論如何阻止用戶輸入，只接受名單上的內容？ –

所以，只要你知道，datalist沒有選擇的事件，它不是一個用戶控件。但是，您可以聽輸入更改事件，並使用它來更改網址。

來源

2016-03-11 13:23:17 AleMonteiro

好吧，現在我知道datalist不支持select，您能否告訴下一步如何聆聽輸入更改事件？ –

Pierre C.答案應該像魅力一樣工作。 – AleMonteiro

自動完成下拉菜單沒有jQuery鏈接

回答

第一次嘗試

相關問題