Question

如何根据我在文本字段中键入的内容显示下拉列表，其中所选选项会将“自己”写入文本字段？例如，如果我被问到我最喜欢的颜色是什么，我开始输入'dar'，下拉列表会显示选项'深红色'，'深蓝色'，'深绿色'等等。但是如果我键入'dark g'只有“深绿色”选项才会出现下拉菜单？可以认为它类似于文本输入，可以消除下拉菜单中的选项，但是在下拉列表中选择一个选项会将它们输入到文本字段中。

这是我目前的代码（虽然我假设我需要JS？）：

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

Answer 1

如果你想自动完成整个字典，那就慢一点。但是如果你只是想自动完成一些单词（例如＆＃34;绿色＆＃34;，＆＃34;红色＆＃34;等等），那就应该这样做。

在您的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。

希望这有帮助

是否可以根据您输入的内容制作带有建议的文字输入？

1 个答案: