57 lines
1.8 KiB
HTML
57 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
</head>
|
||
|
||
<body>
|
||
<input type="text" placeholder="请输入文本">
|
||
<ul></ul>
|
||
</body>
|
||
<script>
|
||
// 1 获取事件； 2 绑定事件； 3 事件处理函数。
|
||
|
||
// 该事件：首先要获取用户输入的文本，需要先判断有无文本，有文本才能进行获取；
|
||
// 其次，文本获取后，要判断默认词组里是否有某一项与之匹配，随后将符合条件的词条统一放入html上；
|
||
// 甲方需求：将词库里和用户输入匹配上的关键词标红。
|
||
var words = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好，是阴天', '不喜欢学习'];
|
||
// 1 获取事件
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
function _(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
|
||
var input = $('input')
|
||
var ul = $('ul')
|
||
// console.log(1);
|
||
// 2 绑定事件
|
||
input.oninput = function () {
|
||
// console.log(2);
|
||
var pipei = []
|
||
if (input.value.length > 0) {
|
||
words.forEach((value, index) => {
|
||
if (value.indexOf(input.value) > -1) {
|
||
// console.log("返回3",value, index);
|
||
var span = `<span style="color: red;">${input.value}</span>`
|
||
var li = `<li> ${ value.replace(input.value, span) } </li>`
|
||
pipei.push(li)
|
||
}
|
||
})
|
||
}
|
||
ul.innerHTML = ''
|
||
if (pipei.length > 0) {
|
||
pipei.forEach((item, ind) => {
|
||
ul.innerHTML += item
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</html> |