如何使用 JavaScript 实现一个简单的搜索提示功能? - 项越资源网-html css js 用法分享社区-开发交流-项越资源网

如何使用 JavaScript 实现一个简单的搜索提示功能?

你可以使用 JavaScript 来实现一个简单的搜索提示功能。下面是一个例子:

// 设置用于存储数据的数组
let dataArray = [
  "JavaScript",
  "Node.js",
  "React.js"
];
// 监听输入框的 change 事件
document.getElementById("myInput").addEventListener("change", function(){
 // 获取用户输入的文字
 let searchText = document.getElementById("myInput").value;
 // 循环遍历数据,检查是否存在该文字
 let suggestions = [];
 for(let i = 0; i < dataArray.length; i++){
   if(dataArray[i].includes(searchText)) {
     // 将匹配到该文字的数据放入 ’suggestions‘ 数组中
     suggestions.push(dataArray[i]);
   }
 }
 // 将 ’suggestions‘ 数组显示在界面上
 displaySuggestions(suggestions);
});

// 显示建议的函数
function displaySuggestions(suggestions) {
 // 清空原有的建议
 $(".suggestions").html("");
 // 将传入的建议添加到提示框
 for (let suggestion in suggestions) {
   $(".suggestions").append(`<div class="item">${suggestions[suggestion]}</div>`);
 }
}
请登录后发表评论

    没有回复内容