입력 한 내용을 기반으로 추천 단어로 텍스트 입력을 할 수 있습니까?

Question

내가 선택한 드롭 다운이 텍스트 필드에 입력되는 것을 기반으로 나타나는 드롭 다운이 어떻게 될까요? 선택한 옵션이 텍스트 필드에 '쓰기'할 수 있습니까? 예를 들어 내가 가장 좋아하는 색이 무엇인지 물었을 때 'dar'를 입력하여 시작한 경우 드롭 다운에는 '어두운 빨간색', '진한 파란색', '진한 녹색'등의 옵션이 표시됩니다. 그러나 '어두운 색' 드롭 다운은 '짙은 녹색'옵션으로 만 나타 납니까? 드롭 다운에서 선택 사항을 제거하는 텍스트 입력과 비슷하지만 드롭 다운에서 옵션을 선택하면 텍스트 필드에 입력됩니다. (내가 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 
    } 
} 

두 번째 기능이 있습니다. 추천을 클릭하면 다음과 같이 채울 수 있습니다.

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

커서를 따라 가려면 원하는 CSS가 필요할 수 있습니다.

희망이 있습니다.