是否有可能根据您输入的内容提供带有建议的文本输入？

  • Z时代
  • 2024-01-10
  • 分类：问答

如何根据我输入的文本字段显示下拉菜单，其中所选选项将自己写入文本字段？例如，如果询问我最喜欢的颜色是什么，并开始输入'dar'，则会出现一个下拉菜单，选项为“深红色”，“深蓝色”，“深绿色”等。但是，如果我输入'dark g'只有选项“深绿色”才会显示下拉菜单？想想它有点像文本输入，可以消除下拉选项，但是在下拉列表中选择一个选项会将它们输入到文本字段中。是否有可能根据您输入的内容提供带有建议的文本输入？

这是我此刻的代码（虽然我认为我需要JS）：

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

回答：

如果你想自动完成一个完整的解释，这是为了减缓。 但是，如果你只是想自动填充一些单词（如“绿色”，“红色”等），这应该做到这一点。

在你的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：所以当你点击的建议，将在填充它。

希望这有助于

以上是 是否有可能根据您输入的内容提供带有建议的文本输入？ 的全部内容， 来源链接： utcz.com/qa/257770.html

回到顶部