我用 HTML 和 Java 脚本制作了这个，并且需要在用户写下他搜索的单词的第一个字母时出现建议下拉菜单
我怎样才能做到这一点？
<html>
<body>
<input type="text" id="myInput" autofocus="true">
<button id="btn" onclick="myfunction()">Search</button>
<div id="outputArea" style="font-size: 30px"></div>
<script>
var acronyms = {
omg: "Oh My God",
lol: "Lough Out Loud",
lmao: "Lough My Age Off",
wtf: "What This Function"
};
var outputAreaRef = document.getElementById("outputArea");
function myfunction(){
var word = document.getElementById("myInput").value.toLowerCase().trim();
if (acronyms[word] !== undefined) {word = acronyms[word];}
outputAreaRef.innerHTML = word;}
</script>
</body>
</html>
最佳答案
有一个 HTML5 元素可以让这变得非常简单。 datalist tag 。您可以对列表中的项目进行硬编码，也可以使用一些 JS 来填充列表。
您可以在数据列表上的其他选项中查看此答案。 Html datalist values from array in javascript
如果您使用 JS 来填充，标记最终的样子如下:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<!-- more items here -->
</datalist>
(function(browsers) {
function addItems (list, container) {
list.forEach(function(item){
const option = document.createElement('option');
option.setAttribute('value', item);
container.appendChild(option);
});
}
const browserList = ['Internet Explorer','Firefox','Chrome','Opera','Safari','Brave'];
addItems(browserList, browsers);
}(document.getElementById('browsers')));<label for="autocomplete">Search for Browsers</label>
<input id="autocomplete" list="browsers">
<datalist id="browsers"></datalist>关于javascript - 当用户搜索某些内容时，如何使用 JavaScript 进行自动完成或建议？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52155771/