<template>
<!-- 写HTML -->
<div id="home_page">
<!-- input框 绑定关键字 鼠标按下回车键搜索 键盘抬起执行实时搜索 失焦的时候,不会展示展示数据列表-->
<input type="text" v-model="keywords" @keydown.enter="search" @keyup="getData($event)" @blur="hiddenData" />
<!-- 点击button按钮执行搜索功能 -->
<button @click="search">搜索</button>
<!-- //搜索记录记录搜索记录 点击的时候回拿到数据值 -->
<span class="search-history" v-for="item in searchHistory" :key ="item" @click="ressetSearch(item)">
<!-- {
{item}} -->
</span>
<!-- 实时的搜索数据显示列表-->
<!-- <ul class="show_data" v-show="isShow">
<li v-for="(item,index) in data" v-bind:key="index">{
{item}}</li>
</ul> -->
<!-- 当点击搜索按钮,和按下回车键的时候 ,会把搜索出来的与input框中的字一致的数据展示出来 -->
<ul>
<li v-for="(item,index) in result" v-bind:key="index">{
{item}}</li>
</ul>
</div>
</template>
<script>
// 写js
export default {
data() {
return {
goodsList: ["html", "css", "javascript", "html5", "css3", "vue", "react", "node"], //所有的数据
keywords: '', //input框绑定的关键字
result: [], //搜索结果,是一个数组
data: [], //实时的搜索的数据
isShow: false, //判断实时的数据是否要显示 默认是不显示
searchHistory: [], //搜索记录
}
},
methods: {
//搜索的方法
search() {
// 每次搜索前 把之前的数据清空
this.result = [];
// 每次输入的时候,让他显示出来
this.isShow = true;
// 遍历拿到item,并判断值是否和input框相似,一样就添加到result数组中
this.goodsList.map((item )=> {
if (item.includes(this.keywords)) {
this.result.push(item);
}
});
// 存数据之前 如果历史记录中有的话,就不让添加 !取反
if (!this.searchHistory.includes(this.keywords)) {
// 搜索记录会添加那些的input框的关键字
this.searchHistory.push(this.keywords);
}
},
// 实时的搜索的数据 根据传的参数,拿到event的对象
getData(event) {
// 监听event的事件 当键盘码是13的话,就让实时的列表隐藏
if (event.keyCode == 13) {
this.isShow = false;
return; //方法结束,不执行
}
// 每次搜索前 把之前的数据清空
this.data = [];
// 当他按下回车的时候也没有,即,不会显示实时更新的一部分
this.isShow = true;
this.goodsList.map((item) => {
if (item.includes(this.keywords)) {
this.data.push(item);
}
})
},
// 当他失去焦点的时候,会隐藏实时的列表
hiddenData() {
this.isShow = false;
},
// kw就是传过来的值item,意思就是点击历史记录的词,会重新返回到input输入框
ressetSearch(kw) {
this.keywords = kw;
}
}
}
</script>
<style scoped>
/* 写样式 */
#home_page {
margin: 50px 0;
}
.show_data {
border: 1px solid #999;
list-style: none;
padding: 0;
margin: 0;
width: 154px;
padding: 10px 5px;
}
.search-history {
color: #222;
cursor: pointer;
}
.search-history:hover {
color: red;
}
</style>
vue搜索案例
猜你喜欢
转载自blog.csdn.net/qq_45424679/article/details/115244026
今日推荐
周排行