需求：
需求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>
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
