高亮ok文字全部显示版
<template>
<div class="app">
<input v-model="value" type="text" @input="inputChange">
<ul>
<li v-for=" (item,index) in fileList" :key="index" v-html="item.name" />
</ul>
</div>
</template>
<script>
export default {
name: 'SearchText',
components: {
},
data() {
return {
value: '',
fileList: [{ name: '全部1' }, { name: '文档2' }, { name: '公告3' }, { name: 'FAQ4' }]
}
},
mounted() {},
methods: {
inputChange() {
this.fileList = [{ name: '全部1' }, { name: '文档2' }, { name: '公告3' }, { name: 'FAQ4' }]
this.value.split('').forEach(data => {
console.log(data, 'data')
this.fileList.forEach(item => {
if (item.name.indexOf(data) === -1) return
const hightStr = `<span style='color:red'>${data}</span>`
const str = new RegExp(data, 'gi')
item.name = item.name.replace(str, hightStr)
})
})
}
}
}
</script>
<style lang="scss" scoped>
.app{
padding: 10%;
}
</style>
高亮不会隐藏版
<template>
<div class="bright-index">
<div class="search-box">
<input v-model="keyword" type="text" class="input" placeholder="请输入搜索内容, 提示:搜索设备">
<button class="btn" @click="search">搜索</button>
</div>
<div class="content-box">
<div v-for="(item ,index) in resultList" :key="index" class="content-card">
设备名称:<span v-html="item.name" />
<span>日期:<span v-html="item.date" /></span>
<span>地址:<span v-html="item.adress" /></span>
<span>类型:<span v-html="item.type" /></span>
</div>
<h2 v-if="isShowTip">没有搜索到匹配结果</h2>
</div>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '', // 与输入框绑定的变量
deviceList: [
{ 'name': '设备一111111111111111', 'date': '2019-03-24', 'adress': '深圳', 'type': '电动' },
{ 'name': '设备二1111111111111', 'date': '2019-03-24', 'adress': '上海', 'type': '汽油' },
{ 'name': '设备三111111111111', 'date': '2019-03-24', 'adress': '北京', 'type': '电动' },
{ 'name': '设备四111111111', 'date': '2019-03-24', 'adress': '广州', 'type': '汽油' }
],
resultList: [], // 真正展示的数据，也就是筛选后的数据
isShowTip: true // 当搜索不到数据时为true
}
},
mounted() {},
methods: {
search() {
if (this.keyword === '') { // 如果没有输入内容，不让往下执行
return
}
this.resultList = [] // 每次搜索对结果数组做初始化
this.deviceList.forEach((item) => { // 把初始数据进行遍历
/**
下面是把初始数据中的每一条数据的四个字段分别去和输入的内容进行匹配，
如果某一字段中包含输入的内容，就往resultList中加
**/
if (item.name.indexOf(this.keyword) > -1 ||
item.date.indexOf(this.keyword) > -1 ||
item.adress.indexOf(this.keyword) > -1 ||
item.type.indexOf(this.keyword) > -1) {
this.resultList.push(item)
}
})
if (this.resultList.length === 0) { // 如果没有匹配结果，就显示提示信息
this.isShowTip = true
}
// 将得到的每一条数据中的每一个字段进行处理,brightKeyword就是变高亮的方法
this.resultList.map((item) => { // 遍历
item.name = this.brightKeyword(item.name)
item.date = this.brightKeyword(item.date)
item.adress = this.brightKeyword(item.adress)
item.type = this.brightKeyword(item.type)
})
},
brightKeyword(val) {
const keyword = this.keyword // 获取输入框输入的内容
if (val.indexOf(keyword) !== -1) { // 判断这个字段中是否包含keyword
// 如果包含的话，就把这个字段中的那一部分进行替换成html字符
return val.replace(keyword, `<font color='#42cccc'>${keyword}</font>`)
} else {
return val
}
}
}
}
</script>
<style lang="scss" scoped>
.bright-index{
padding: 10%;
}
</style>
都亮了OK版
<template>
<div class="bright-index">
<div class="search-box">
<input v-model="keyword" type="text" class="input" placeholder="请输入搜索内容, 提示:搜索设备">
<button class="btn" @click="search">搜索</button>
</div>
<div class="content-box">
<div v-for="(item, index) in resultList" :key="index" class="content-card">
设备名称:<span v-html="item.name" />
<span>日期:<span v-html="item.date" /></span>
<span>地址:<span v-html="item.adress" /></span>
<span>类型:<span v-html="item.type" /></span>
</div>
<h2 v-if="isShowTip">没有搜索到匹配结果</h2>
</div>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '', // 与输入框绑定的变量
deviceList: [
{ 'name': '设备一111111111111111', 'date': '2019-03-24', 'adress': '深圳', 'type': '电动' },
{ 'name': '设备二1111111111111', 'date': '2019-03-24', 'adress': '上海', 'type': '汽油' },
{ 'name': '设备三111111111111', 'date': '2019-03-24', 'adress': '北京', 'type': '电动' },
{ 'name': '设备四111111111', 'date': '2019-03-24', 'adress': '广州', 'type': '汽油' }
],
lipu: [],
resultList: [], // 真正展示的数据，也就是筛选后的数据
isShowTip: false // 当搜索不到数据时为true
}
},
created() {
// console.log('生命周期--', this.resultList)
},
methods: {
search() {
if (this.keyword === '') { // 如果没有输入内容，不让往下执行
return
}// 每次搜索对结果数组做初始化
// if (this.resultList.length > 0) {
// console.log('test--11', this.resultList)
this.resultList = []
// }
this.lipu = JSON.stringify(this.deviceList)
JSON.parse(this.lipu).forEach((item) => { // 把初始数据进行遍历
// console.log('item0----', item.date.indexOf(`'color='red'`))
/**
下面是把初始数据中的每一条数据的四个字段分别去和输入的内容进行匹配，
如果某一字段中包含输入的内容，就往resultList中加
**/
if (item.name.indexOf(this.keyword) > -1 ||
item.date.indexOf(this.keyword) > -1 ||
item.adress.indexOf(this.keyword) > -1 ||
item.type.indexOf(this.keyword) > -1) {
this.resultList.push(item)
}
})
if (this.resultList.length === 0) { // 如果没有匹配结果，就显示提示信息
this.isShowTip = true
} else {
this.isShowTip = false
}
// 将得到的每一条数据中的每一个字段进行处理,brightKeyword就是变高亮的方法
this.resultList.map((item) => { // 遍历
item.name = this.brightKeyword(item.name)
item.date = this.brightKeyword(item.date)
item.adress = this.brightKeyword(item.adress)
item.type = this.brightKeyword(item.type)
})
console.log('2---', this.resultList)
},
brightKeyword(val) {
let keyword = ''
keyword = this.keyword// 获取输入框输入的内容
console.log('this.keyword', this.keyword);
if (val.indexOf(keyword) !== -1) { // 判断这个字段中是否包含keyword
console.log('val--', val)
// 如果包含的话，就把这个字段中的那一部分进行替换成html字符
const hightStr = `<span style='color:red'>${keyword}</span>`
const str = new RegExp(keyword, 'gi')
return val.replace(str, hightStr)
} else {
return val
}
}
}
}
</script>
<style lang="scss" scoped>
.bright-index {
padding: 10%;
}
</style>
一个备份
<template>
<div class="text-container">
<Search />
<div class="tab">
<div v-for="(item, index) in titleList" :key="item" class="btn" :class="{ active: itemIndex == index }" @click="btnClick(index)">{{ item }}()</div>
<div class="search-box">
<input v-model="inputVal" type="text" class="input" placeholder="请输入搜索内容, 提示:搜索设备" />
<button class="btn" @click="search">搜索</button>
</div>
</div>
<div class="content">
<div v-if="itemIndex == 0">
<div class="Afile" v-for="(item, index) in resultList" :key="index">
<p class="title" v-html="item.title"></p>
<p class="main-text" v-html="item.file"></p>
<div class="text-type">{{ item.type }}</div>
<div class="Update-time">更新时间：{{ item.date }}</div>
<button class="btn"><i class="el-icon-arrow-right"></i></button>
</div>
<!-- @size-change="handleSizeChange"
@current-change="handleCurrentChange" -->
<div v-if="isShowpagin">
<el-pagination :current-page="currentPage" :page-sizes="[10, 50, 100, 400]" :page-size="10" background layout="->,prev, pager, next,sizes,jumper,total" :total="400"> </el-pagination>
</div>
</div>
<div v-if="itemIndex == 1">
<div class="Afile" v-for="(item, index) in resultList" :key="index">
<p class="title" v-html="item.title"></p>
<p class="main-text" v-html="item.file"></p>
<div class="text-type">{{ item.type }}</div>
<div class="Update-time">更新时间：{{ item.date }}</div>
<button class="btn"><i class="el-icon-arrow-right"></i></button>
</div>
<el-pagination :current-page="currentPage" :page-sizes="[10, 50, 100, 400]" :page-size="10" background layout="->,prev, pager, next,sizes,jumper,total" :total="400"> </el-pagination>
</div>
<div v-if="itemIndex == 2">
<el-pagination :current-page="currentPage" :page-sizes="[10, 50, 100, 400]" :page-size="10" background layout="->,prev, pager, next,sizes,jumper,total" :total="400"> </el-pagination>
</div>
<div v-if="itemIndex == 3">
<el-pagination :current-page="currentPage" :page-sizes="[10, 50, 100, 400]" :page-size="10" background layout="->,prev, pager, next,sizes,jumper,total" :total="400"> </el-pagination>
</div>
<div v-if="isShowTip" style="height:760px;width: 1200px;">
<div class="Noresults">
<p>没有搜索到相关结果！</p>
</div>
</div>
</div>
</div>
</template>
<script>
import Search from '../Search/index.vue'
export default {
name: 'search-text',
data() {
return {
titleList: ['全部', '文档', '公告', 'FAQ'],
itemIndex: 0,
fileList: [
{
title: 'aaaaaaabcd',
date: '2022-06-10 20:05:25',
file:
'具有五千多年文明史的中华民族，在历史上创造了无数辉煌，也经历过许多磨难。近代以后，中国逐步成为半殖民地半封建社会，饱受列强欺凌、四分五裂、战乱频繁、生灵涂炭之苦。中国共产党成立之后，紧紧团结带领全国各族人民，经过百年奋斗，洗雪民族耻辱，中国人民成为自己命运的主人',
type: '文档'
},
{
title: 'efgh',
date: '2022-06-10 18:05:25',
file:
'在强国建设、民族复兴的新征程，我们要坚定不移推动高质量发展。要完整、准确、全面贯彻新发展理念，加快构建新发展格局，深入实施科教兴国战略、人才强国战略、创新驱动发展战略，着力提升科技自立自强能力',
type: 'FAQ'
},
{
title: 'cdef',
date: '2019-03-24',
file:
'一年之计在于春，一年好景在春耕。眼下春耕备耕正在有序进行，各种新技术、新模式涌向田间地头，智慧农业让春耕跑出“加速度”。中华民族迎来了从站起来、富起来到强起来的伟大飞跃，中华民族伟大复兴进入了不可逆转的历史进程。',
type: '公告'
},
{
title: 'ghij',
date: '2019-03-24 20:05:25',
file: '盼星星盼月亮，终于盼到张学友回归拍电影啦！视频里学友哥真的好帅气！而帅气背后，是向好搭档谢霆锋的虚心请教，与无数遍“再拍一条”的请求。',
type: '文档'
}
],
currentPage: 15,
inputVal: '',
fileList2: [],
resultList: [],
isShowTip: false,
isShowpagin: false
}
},
components: {
Search
},
mounted() {},
methods: {
btnClick(index) {
this.itemIndex = index
},
search() {
this.resultList = [] // 每次搜索对结果数组做初始化
this.fileList2 = JSON.stringify(this.fileList)
JSON.parse(this.fileList2).forEach(item => {
// 把初始数据进行遍历
/**
下面是把初始数据中的每一条数据的四个字段分别去和输入的内容进行匹配，
如果某一字段中包含输入的内容，就往resultList中加
**/
if (this.inputVal === '') {
// 如果没有输入内容，不让往下执行
return
}
if (item.title.indexOf(this.inputVal) > -1 || item.file.indexOf(this.inputVal) > -1) {
this.resultList.push(item)
}
})
if (this.resultList.length === 0) {
// 如果没有匹配结果，就显示提示信息
this.isShowTip = true
} else {
this.isShowTip = false
}
if (this.resultList.length !== 0) {
// 如果没有匹配结果，就显示提示信息
this.isShowpagin = true
} else {
this.isShowpagin = false
}
// 将得到的每一条数据中的每一个字段进行处理,brightKeyword就是变高亮的方法
this.resultList.map(item => {
// 遍历
item.title = this.brightKeyword(item.title)
item.file = this.brightKeyword(item.file)
})
},
brightKeyword(val) {
const inputVal = this.inputVal // 获取输入框输入的内容
if (val.indexOf(inputVal) !== -1) {
// 判断这个字段中是否包含inputVal
// 如果包含的话，就把这个字段中的那一部分进行替换成html字符
return val.replace(inputVal, `<font color='red'>${inputVal}</font>`)
} else {
return val
}
}
}
}
</script>
<style lang="scss" scoped>
.text-container {
width: 1920px;
// height: 1008px;
background: #f5f7fa;
.tab {
width: 1200px;
height: 72px;
margin-top: 24px;
margin-left: 360px;
padding-left: 32px;
background: rgb(244, 141, 63, 0.06);
box-shadow: inset 0 -1px 0 0 #e7e9eb;
border-radius: 10px;
display: flex;
.btn {
width: 92px;
height: 24px;
margin-top: 26px;
margin-right: 32px;
border-radius: 2px;
flex-direction: row;
text-align: center;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 14px;
color: #323233;
text-align: center;
line-height: 24px;
}
.active {
background: rgb(244, 141, 63, 0.1);
color: #f48d3f;
}
}
.content {
width: 1200px;
margin-top: 16px;
margin-left: 360px;
padding: 32px 0px;
background: #ffffff;
box-shadow: 0 18px 39px 0 #cacbcb36;
border-radius: 12px;
display: flex;
.Afile {
width: 1152px;
height: 114px;
margin: 0px 0px 24px 24px;
// border: 1px solid blue;
border-color: #edeef3;
border-bottom-style: solid;
position: relative;
.title {
color: #000000d9;
font-size: 18px;
font-weight: 500;
font-face: PingFangSC;
// line-height: 0;
letter-spacing: 0;
paragraph-spacing: 0;
height: 25px;
}
.main-text {
margin-top: 10px;
color: #000000a6;
font-size: 16px;
font-weight: 400;
height: 22px;
font-face: PingFangSC;
// line-height: 0;
// letter-spacing: 0;
// paragraph-spacing: 0;
text-align: left;
width: 100%; /*一定要设置宽度，或者元素内含的百分比*/
overflow: hidden; /*溢出的部分隐藏*/
white-space: nowrap; /*文本不换行*/
text-overflow: ellipsis; /*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}
.Update-time {
height: 16px;
margin-bottom: 17px;
display: inline-block;
}
.text-type {
height: 16px;
margin-top: 24px;
margin-right: 24px;
display: inline-block;
}
.btn {
width: 16px;
height: 16px;
color: #b7b9be;
position: absolute;
top: 75px;
left: 848px;
.el-icon-arrow-right {
margin-left: -4.9px;
}
}
}
.Noresults {
width: 423px;
height: 159.96px;
margin: 163px 0px 0px 389px;
padding-top: 142px;
padding-left: 132px;
// border: 1px solid blue;
background-image: url('./images/无结果.png');
p {
width: 160px;
height: 22px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 16px;
color: #000000;
text-align: center;
}
}
}
}
</style>
2949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
