封神之作！
集输入框清空、分词搜索排序和关键词高亮于一体。
运行试试：
<link rel="stylesheet" type="text/css" href="https://cdn.uv.cc/layui/2.9.14/css/layui.css" />
<script src="https://cdn.uv.cc/layui/2.9.14/layui.js"></script>
<style>
.input-wrapper {
position: relative;
margin: 5px;
}
.clear-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
}
</style>
<div id="app">
<div class="input-wrapper">
<input
v-model="search_word"
type="text" id="username" class="layui-input" placeholder="搜索，支持空格分词">
<i @click="search_word = ''" v-show="search_word !== ''" class="layui-icon clear-icon" id="clearIcon">ဆ</i> <!-- 清空图标 -->
</div>
<div style="margin: 5px;" v-for="item of filter_sort(li, search_word, function(x) {return x})">
<div v-html="render_search(item, search_word)"></div>
</div>
</div>
<script src="https://cdn.uv.cc/vue/2.6.10/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
search_word: '',
li: [
'天王盖地虎',
'风萧萧兮易水寒',
'独在异乡为异客',
'二月春风似剪刀',
'Welcome to China'
],
},
methods: {
render_search(text, search) {
// 空格分词
let a = search.split(' ')
// 选择有效词
let b = []
for(let item of a) {
item = item.trim()
if(item !== '') {
b.push(item)
}
}
function recu_render(t, ba) {
let sa = t.split(new RegExp('('+ ba[0] +')', 'i'))
if(ba.length > 1) {
let i = 0
while(i < sa.length) {
sa[i] = recu_render(sa[i], ba.slice(1))
i += 2
}
}
let s = ''
for(i = 0; i < sa.length; i ++) {
if(i % 2 == 0) {
s += sa[i]
}
else {
s += '<span style="color: red;">'+ sa[i] +'</span>'
}
}
return s
}
return recu_render(text, b)
},
filter_sort(data, search, fun) {
if(search.trim() === '') {
return data
}
// 空格分词
let a = search.split(' ')
// 选择有效词
let b = []
for(let item of a) {
item = item.trim()
if(item !== '') {
b.push(item)
}
}
let len = b.length
// 打分以排序
let new_data = []
for(item of data) {
let score = 0
// 第几号位置的检索词
let p = len
for(let ib of b) {
if(fun(item).toUpperCase().indexOf(ib.toUpperCase()) !== -1) {
score += 2 * len + p
}
p -= 1
}
if(score > 0) {
new_data.push({
score: score,
item: item,
})
}
}
// 对 new_data 进行排序
new_data.sort(function(x, y) {
return y.score - x.score
})
let return_data = []
for(item of new_data) {
return_data.push(item.item)
}
return return_data
},
},
})
</script>
去创作