需求：
需求1：用户输入关键字，我们想办法获取到用户输入的关键字，然后去“服务器”数组匹配：匹配成功，将词条显示在输入框下面
需求2：鼠标移入变色，移出变回去
需求3：点击li，将li的数据放到输入框中，不再提示
需求4： 用户任意输入一个不存在的关键字 点击search的时候就将数据保存起来 下次就有这个词条
服务器数据：
["海海","海海有女朋友吗", "海海是谁", "广东人", "广东人爱吃", "广东人爱吃什么", "广东人什么都吃", "小米", "小米雷军", "小米手机", "", "小米回应收购恒大", "阿里", "阿里跌8200亿元成最大输家","苹果", "苹果乔布斯", "苹果以15.8万亿价值蝉联", "苹果一块一斤", "苹果笔记本"];
效果图
用户输入关键字就会弹出弹框
基本样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { font-size: 20px; } .box { width: 600px; height: 40px; margin: 200px auto; position: relative; } #txt { width: 498px; height: 38px; border: 1px solid #ccc; font-size: 20px; } #search { width: 100px; height: 40px; } #keywords { position: absolute; top: 40px; left: 0; background-color: #6cf; list-style: none; width: 500px; } li { line-height: 24px; } </style> </head> <body> <div class="box"> <div class="top"> <input type="text" id="txt" /><input type="button" value="search" id="search" /> </div> <ul id="keywords"> </ul> </div> </body> </html>
思路分析
思路分析 补充技术：用户输入的事件 oninput onkeyup onkeydown 只要用户输入内容：就会触发事件 1. 获取事件源：#txt 2. 确定事件类型：oninput 3. 事件处理 3.1 获取用户输入的数据：input框的value属性 3.2 用户每输入多一个内容（或者少）：应该先清空原来匹配的结果：ul.innerHTML = ''; 3.3 安全处理：用户输入的数据，有可能带空格，一般需要帮助用户去除两边的空格：目标字符串.trim()：去除目标两边的空格 3.4 安全处理：如果用户输入的字符串是空的（没有输入）：不需要进行服务器处理（下一步没有必要执行）：结束事件函数；return 3.5 去服务器匹配数据：但是不是去数组中找，而是遍历数组：看数组的元素中是否包含用户输入的关键字 3.5.1 判定：词条中是否包含用户输入的关键字：词条.indexOf(关键字) != -1 ：包含关键字 3.5.2 将关键字放到li中，放到ul#keywords下 3.5.2.1 创建li：document.createElement('li') 3.5.2.2 添加内容：li.innerText = 词条 3.5.2.3 将li放到ul中
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { font-size: 20px; } .box { width: 600px; height: 40px; margin: 200px auto; position: relative; } #txt { width: 498px; height: 38px; border: 1px solid #ccc; font-size: 20px; } #search { width: 100px; height: 40px; } #keywords { position: absolute; top: 40px; left: 0; background-color: #6cf; list-style: none; width: 500px; } li { line-height: 24px; } </style> </head> <body> <div class="box"> <div class="top"> <input type="text" id="txt" /><input type="button" value="search" id="search" /> </div> <ul id="keywords"> </ul> </div> <script> // 需求1：用户输入关键字，我们想办法获取到用户输入的关键字，然后去“服务器”数组匹配：匹配成功，将词条显示在输入框下面 /* 思路分析 补充技术：用户输入的事件 oninput onkeyup onkeydown 只要用户输入内容：就会触发事件 1. 获取事件源：#txt 2. 确定事件类型：oninput 3. 事件处理 3.1 获取用户输入的数据：input框的value属性 3.2 用户每输入多一个内容（或者少）：应该先清空原来匹配的结果：ul.innerHTML = ''; 3.3 安全处理：用户输入的数据，有可能带空格，一般需要帮助用户去除两边的空格：目标字符串.trim()：去除目标两边的空格 3.4 安全处理：如果用户输入的字符串是空的（没有输入）：不需要进行服务器处理（下一步没有必要执行）：结束事件函数；return 3.5 去服务器匹配数据：但是不是去数组中找，而是遍历数组：看数组的元素中是否包含用户输入的关键字 3.5.1 判定：词条中是否包含用户输入的关键字：词条.indexOf(关键字) != -1 ：包含关键字 3.5.2 将关键字放到li中，放到ul#keywords下 3.5.2.1 创建li：document.createElement('li') 3.5.2.2 添加内容：li.innerText = 词条 3.5.2.3 将li放到ul中 */ // 补充技术：用户输入的事件 oninput onkeyup onkeydown // 只要用户输入内容：就会触发事件 const keywords = ["海海", "海海有女朋友吗", "海海是谁", "广东人", "广东人爱吃", "广东人爱吃什么", "广东人什么都吃", "小米", "小米雷军", "小米手机", "", "小米回应收购恒大", "阿里", "阿里跌8200亿元成最大输家","苹果", "苹果乔布斯", "苹果以15.8万亿价值蝉联", "苹果一块一斤", "苹果笔记本"]; // 词条：模拟百度的关键词提示 // 1. 获取事件源：#txt let txt = document.getElementById('txt'); let ul = document.getElementById('keywords'); // console.log(txt); // console.log(ul); // 2. 确定事件类型：oninput txt.oninput = function () { // 3. 事件处理 // 3.1 获取用户输入的数据：input框的value属性 // console.log(txt.value); let value = txt.value; // console.log(value); // 3.2 用户每输入多一个内容（或者少）：应该先清空原来匹配的结果：ul.innerHTML = ''; ul.innerHTML = ''; // 3.3 安全处理：用户输入的数据，有可能带空格，一般需要帮助用户去除两边的空格：目标字符串.trim()：去除目标两边的空格 value = value.trim(); // console.log(value); // 3.4 安全处理：如果用户输入的字符串是空的（没有输入）：不需要进行服务器处理（下一步没有必要执行）：结束事件函数；return if (value.length == 0) { return; }; keywords.forEach(function (item) { // console.log(item); // 3.5 去服务器匹配数据：但是不是去数组中找，而是遍历数组：看数组的元素中是否包含用户输入的关键字 // 3.5.1 判定：词条中是否包含用户输入的关键字：词条.indexOf(关键字) != -1 ：包含关键字 if (item.indexOf(value) != -1) { // 3.5.2 将关键字放到li中，放到ul#keywords下 // 3.5.2.1 创建li：document.createElement('li') let li = document.createElement('li'); // 3.5.2.2 添加内容：li.innerText = 词条 li.innerText = item; // 3.5.2.3 将li放到ul中 ul.appendChild(li); // console.log(lis); // 需求2：鼠标移入变色，移出变回去 /* 思路分析 1. 事件源：li 2. 事件类型：鼠标移入 onmouseover 鼠标移出 onmouseout 3. 事件处理 3.1 鼠标移入：修改当前li的背景色：li.style.backgroundColor = '具体颜色' 3.2 鼠标移出：修改当前li的背景色：li.style.backgroundColor = '' */ // 移入事件 li.onmousemove = function () { // li.setAttribute('date-color', backgroundColor); this.style.backgroundColor = 'yellow'; }; // 移出事件 li.onmouseout = function () { this.style.backgroundColor = ''; }; // 需求3：点击li，将li的数据放到输入框中，不再提示 /* 思路分析 1. 事件源：li 2. 事件类型：onclick 3. 事件处理 3.1 将li中的数据放到输入框中：txt.value = li.innerText 3.2 清空提示列表：ul.innerHTML = '' */ // 1. 事件源：li // 2. 事件类型：onclick li.onclick = function () { // 3. 事件处理 // 3.1 将li中的数据放到输入框中：txt.value = li.innerText txt.value = li.innerText // 3.2 清空提示列表：ul.innerHTML = '' ul.innerHTML = ''; }; }; }); }; // 要求 用户任意输入一个不存在的关键字 点击search的时候就将数据保存起来 下次就有这个词条 // 1给search绑定事件 let search = document.getElementById('search'); search.onclick = function () { // console.log(search); // 保存原来数据 let z = txt.value; // console.log(z); z = z.trim(); // 2获取用户输入的数据 ：安全 （空格处理）； if (z.length == 0) { return; }; // 3判定原词条中是否存在一样的词条：数组。indexof（用户输入）==-1 if (keywords.indexOf(z) == -1) { // 4 用户输入的数据存入数组中：数组。push（用户输入的） keywords.push(z); }; }; </script> </body> </html>
