是否有可能根據您輸入的內容提供帶有建議的文本輸入？

如何根據我輸入的文本字段顯示下拉菜單，其中所選選項將自己寫入文本字段？例如，如果詢問我最喜歡的顏色是什麼，並開始輸入'dar'，則會出現一個下拉菜單，選項爲「深紅色」，「深藍色」，「深綠色」等。但是，如果我輸入'dark g'只有選項「深綠色」纔會顯示下拉菜單？想想它有點像文本輸入，可以消除下拉選項，但是在下拉列表中選擇一個選項會將它們輸入到文本字段中。是否有可能根據您輸入的內容提供帶有建議的文本輸入？

這是我此刻的代碼（雖然我認爲我需要JS）：

<input type="text" placeholder="Name Of Gear"> 
 
       <input type="number" class="amount" maxlength="4" placeholder="Amount" max="999">

來源

2017-12-02 Ant Arni

是否有可能...是的。是如何做到這一點太廣泛這個網站的問題......也是。搜索網頁中的腳本，使用*「autocomplete」*或*「typeahead」* – charlietfl

這些術語來允許您使用第三方庫，或者您必須自己做？ –

如果你想自動完成一個完整的解釋，這是爲了減緩。但是，如果你只是想自動填充一些單詞（如「綠色」，「紅色」等），這應該做到這一點。

在你的HMTL你需要一個輸入和一個div。輸入用於輸入，div提供建議。

<input id="input" oninput="findSuggestions('input', 'suggestions')"> 
<div id="suggestions"></div>

所以，如果你鍵入，一個函數將被調用。這個函數將會通過一個包含所有建議的數組。

var arySuggestions = ["Alarm", "Already" , "Ballon"] // This is where all you suggestions go 

function findSuggestions(strInputId, strSuggestionsDivId) { 
    var objInput = document.getElementById(strInputId) 
    var strInput = objInput.value // get the current text 

    var objSuggestionsDiv = document.getElementById(strSuggestionsDivId) 

    if (strInput.length > 0) { 
     objSuggestionsDiv.innerHTML = ""; // empty the suggestion div, just in case 
     var objList = document.createElement("ul"); 

     for (var i = 0; i < arySuggestions.length; i++) { 
      var word = arySuggestions[i] 
      var wordPart = word.substring(0,strInput.length) 
      if (word.length > strInput.length && wordPart === strInput) { // check if the words are matching 
       // if they do create a list entry 
       var objListEntity = document.createElement("li"); 
       objListEntity.setAttribute("onclick", "complete('" + word + "', '" + strInputId + "', '" + strSuggestionsDivId + "');"); 
       objListEntity.innerHTML = word; 
       objList.appendChild(objListEntity); 
      } 
     } 
     // show the suggestionList 
     objSuggestionsDiv.appendChild(objList); 
    } else { 
     objSuggestionsDiv.innerHTML = ""; // empty the suggestion div 
    } 
}

還有第二個功能。

function complete(strComplete, strInputId, strSuggestionsDivId) { 
    document.getElementById(strInputId).value = strComplete; 
    document.getElementById(strSuggestionsDivId).innerHTML = ""; // empty the suggestion div 
}

如果你想建議按照你的光標，你可能會需要一些CSS：所以當你點擊的建議，將在填充它。

希望這有助於

來源

2017-12-02 20:27:29

這不適用於我 - 我已經在我的代碼中嘗試過，並且直接複製/粘貼了您在jsfiddle中發佈的內容，但都無效，您確定它的工作正常嗎？謝謝:) –

我只是複製/粘貼到一個新的文件，它適用於我。你會得到什麼樣的錯誤？試着寫一個大寫的A，看看你是否有「警報」和「已經」作爲一個建議，請:) –

嘗試使用js內聯而不是外部，看看會發生什麼 –

是否有可能根據您輸入的內容提供帶有建議的文本輸入？

回答

相關問題