入力した内容に基づいて候補を含むテキスト入力を行うことはできますか？

Question

テキストフィールドに入力したものに基づいてドロップダウンを表示すると、選択したオプションがテキストフィールドに自身を書き込みます。たとえば、私が好きな色が何だったのかと聞いたら、 'dar'とタイプして始めましたが、ドロップダウンには 'dark red'、 'dark blue'、 'dark green'オプションが「濃い緑」の場合にのみドロップダウンが表示されますか？ドロップダウンからの選択を取り除くテキスト入力のようなものだと考えてください。ただし、ドロップダウンのオプションを選択するとテキストフィールドに入力されます。

（私はJSをする必要がありますと仮定したが？）これは、現時点では私のコードです：

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

Answer 1

あなたが全体の辞書を自動補完したい場合は、これが遅いことです。 しかし、いくつかの単語（「緑色」、「赤色」など）をオートコンプリートしたいのであれば、これを行うべきです。

あなたの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 
    } 
} 

第2の機能があります。提案をクリックすると、次のように記入されます。

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

提案にカーソルを従わせるには、おそらくいくつかのCSSが必要です。

希望します。