Ist es möglich, eine Texteingabe mit Vorschlägen basierend auf Ihren Eingaben vorzunehmen?

Question

Wie würde ich ein Drop-Down-Fenster basierend auf dem, was ich in ein Textfeld eingab, erscheinen lassen, wo die ausgewählte Option sich selbst in das Textfeld "schreiben" würde? Wenn ich zum Beispiel gefragt würde, was meine Lieblingsfarbe ist, und ich mit "Dar" anfangen würde, würde ein Dropdown mit den Optionen "dunkelrot", "dunkelblau", "dunkelgrün" usw. erscheinen, wenn ich aber "dunkel g" tippe ein Dropdown würde nur mit der Option "dunkelgrün" erscheinen? Stellen Sie sich eine Art Texteingabe vor, die Auswahlmöglichkeiten aus einem Dropdown-Feld entfernt. Wenn Sie jedoch eine Option im Dropdown-Menü auswählen, werden diese in das Textfeld eingegeben.

Dies ist mein Code im Moment (obwohl ich nehme an, ich werde JS brauchen?):

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

Answer 1

Wenn Sie eine ganze Wörterbuch automatisch zu vervollständigen will, dies zu langsam ist. Aber wenn Sie nur einige Wörter (wie "grün", "rot", etc.) automatisch vervollständigen wollen, sollte dies tun.

In Ihrer HMTL benötigen Sie einen Eingang und ein Div. Die Eingabe ist für die Eingabe und das div präsentiert die Vorschläge.

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

Wenn Sie also eingeben, wird eine Funktion aufgerufen. Diese Funktion wird ein Array mit allen darin enthaltenen Vorschlägen durchlaufen.

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 
    } 
} 

Und es gibt eine zweite Funktion. So dass, wenn Sie auf den Vorschlag klicken, wird es sie in füllen:

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

Wenn Sie die Vorschläge folgen Sie den Cursor wollen Sie wahrscheinlich einige CSS benötigen.

Hoffe, das hilft