热爱生活! 热爱技术！热于分享!
一.方法分析
1.字符串匹配(BF算法 KMP算法 库函数indexOf均可实现)
2.v-for循环实时更新元素
3.@click=""实现点击后页面的跳转同时设置不同id来根据内容的不同来跳转到不同页面
二.代码分析：
html代码:
1.设置v-model绑定元素内容
2.goPage(data.id) 写一个函数来根据id不同跳转界面
<div class="container" id="div1">
<div class="search bar1">
<form>
<input type="text" v-model="inputText" placeholder="请输入您要搜索的内容...">
<button type="submit" @click="Click()"></button>
<table border="1" cellspacing="0">
<table>
<li v-for="data in newDatalist" @click="goPage(data.id)">
{{data.content}}
</li>
</table>
</table>
</form>
</div>JS-Vue代码:
1.dataList[]保存原始数据
2.newDataList[]用于搜索下拉列表的内容的呈现
<script>
var vm=new Vue({
el:"#div1",//绑定id对象
data:{//定义属性对象
id:'',
content:'',
inputText:"",//初始化为空
datalist:[
{id:'1',content:"热爱计算机"},
{id:'2',content:"热爱数据结构"},
{id:'3',content:"热爱生活"},
{id:'4',content:"腾讯"},
{id:'5',content:"大家好!Good morning!"},
{id:'6',content:"oy is studying very hard"},
{id:'7',content:"Tencent oye!"},
{id:'8',content:"好好学习"},
{id:'9',content:"好好吃饭"},
{id:'10',content:"好好运动"},
{id:'11',content:"好好做人"},
{id:'12',content:"赶紧好好写AI方案"}], //原始数据
newDatalist:[]
},
methods:{
showData(val){
let array=val.split(this.keyword);
val=array.join('<font color="red">'+this.keyword+'</font>');
return val;
},
goPage:function(id){
if(id==='4'||id==='7'){
window.open("https://www.tencent.com/");
}
else if(id==='12'){window.open("https://www.paddlepaddle.org.cn/");}
else {window.open("https://www.baidu.com");}
},
Click(){
if(this.inputText==="数据结构")
{
window.open("https://blog.csdn.net/rainchxy/article/details/79454465");
}
else {
window.open("https://www.baidu.com");
}
}
},
watch:{//监听输入框的变化
inputText:function(newText){
if(newText.length>0){
this.newDatalist.splice(0,this.newDatalist.length);//清空之前数组
for(let value of this.datalist){
if(value.content.indexOf(newText)>-1){// 可以直接用indexOf(属性)
this.newDatalist.push({
id: value.id,
content :value.content
});//一定要加this
}
}
}else{
this.newDatalist=[];//输入框为空，等于原始数据
}
}
},
});
</script>完整源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Research Engine</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
text-align: center;
margin: 0;
padding: 0;
background: #494A5F;
font-weight: 500;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.container {
margin-top:200px;
margin-left:380px;
width: 500px;
height: 820px;
}
div.search {padding: 30px 0;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input, button {
border: none;
outline: none;
}
input {
width: 100%;
height: 42px;
padding-left: 13px;
}
button {
height: 42px;
width: 42px;
cursor:pointer;
position: absolute;
}
/*搜索框1*/
.bar1 {background: #A3D0C3; }
.bar1 input {
border: 2px solid #7BA7AB;
border-radius: 5px;
background: #F9F0DA;
color: #9E9C9C;
}
.bar1 button {
top: 0;
right: 0;
background: #7BA7AB;
border-radius: 0 5px 5px 0;
}
.bar1 button:before {
content: "\f002";
font-family: FontAwesome,serif;
font-size: 16px;
color: #F9F0DA;
}
li{
text-align: left;
width:100%;
background: #F9F0DA;
list-style: none;
}
li:hover{
background: #666666;
}
a{
text-decoration: none;
color:black;
}
</style>
</head>
<body>
<div class="container" id="div1">
<div class="search bar1">
<form>
<input type="text" v-model="inputText" placeholder="请输入您要搜索的内容...">
<button type="submit" @click="new Click()"></button>
<table border="1" cellspacing="0">
<table>
<li v-for="data in newDatalist" @click="goPage(data.id)">
{{data.content}}
</li>
</table>
</table>
</form>
</div>
<script>
var vm=new Vue({
el:"#div1",//绑定id对象
data:{//定义属性对象
id:'',
content:'',
inputText:"",//初始化为空
datalist:[
{id:'1',content:"热爱计算机"},
{id:'2',content:"热爱数据结构"},
{id:'3',content:"热爱生活"},
{id:'4',content:"腾讯"},
{id:'5',content:"大家好!Good morning!"},
{id:'6',content:"oy is studying very hard"},
{id:'7',content:"Tencent oye!"},
{id:'8',content:"好好学习"},
{id:'9',content:"好好吃饭"},
{id:'10',content:"好好运动"},
{id:'11',content:"好好做人"},
{id:'12',content:"赶紧好好写AI方案"}], //原始数据
newDatalist:[]
},
methods:{
showData(val){
let array=val.split(this.keyword);
val=array.join('<font color="red">'+this.keyword+'</font>');
return val;
},
goPage:function(id){
if(id==='4'||id==='7'){
window.open("https://www.tencent.com/");
}
else if(id==='12'){window.open("https://www.paddlepaddle.org.cn/");}
else {window.open("https://www.baidu.com");}
},
Click(){
if(this.inputText==="数据结构")
{
window.open("https://blog.csdn.net/rainchxy/article/details/79454465");
}
else {
window.open("https://www.baidu.com");
}
}
},
watch:{//监听输入框的变化
inputText:function(newText){
function next(str) {
var prefix = [];
var suffix = [];
var partMatch;
var i = str.length
var newStr = str.substring(0, i + 1);
for (var k = 0; k < i; k++) {
//取前缀
prefix[k] = newStr.slice(0, k + 1);
suffix[k] = newStr.slice(-k - 1);
if (prefix[k] === suffix[k]) {
partMatch = prefix[k].length;
}
}
if (!partMatch) {
partMatch = 0;
}
return partMatch;
}
function KMP(sourceStr, searchStr) {
var sourceLength = sourceStr.length;
var searchLength = searchStr.length;
var result;
var i = 0;
var j = 0;
for (; i < sourceStr.length; i++) { //最外层循环，主串
//子循环
for (var j = 0; j < searchLength; j++) {
//如果与主串匹配
if (searchStr.charAt(j) === sourceStr.charAt(i)) {
//如果是匹配完成
if (j === searchLength - 1) {
result = i - j;
break;
} else {
//如果匹配到了，就继续循环，i++是用来增加主串的下标位
i++;
}
} else {
if (j > 1) {
i += i - next(searchStr.slice(0, j));
} else {
//移动一位
i = (i - j)
}
break;
}
}
if (result || result === 0) {
break;
}
}
if (result || result === 0) {
return result
} else {
return -1;
}
}
function BF(sourceStr,searchStr){
var i=0;
var j=0;
var start=0;
while(i<sourceStr.length&&j<searchStr.length)
{
if(sourceStr[i]===searchStr[j])
{
i++;
j++;
}
else{
start++;
i=start;
j=0;
}
}
if(j===searchStr.length){return start+1;}
else{return -1;}
}
if(newText.length>0){
this.newDatalist.splice(0,this.newDatalist.length);//清空之前数组
for(let value of this.datalist){
if(KMP(value.content,newText)>-1){// 可以直接用indexOf(属性)
this.newDatalist.push({
id: value.id,
content :value.content
});//一定要加this
}
}
}else{
this.newDatalist=[];//输入框为空，等于原始数据
}
}
},
});
</script>
</body>
</html>