直播开发app，实时搜索、搜索引擎框

直播开发app，实时搜索、搜索引擎框实现的相关代码

1.view部分

 

<template>
<view class="content">
<!-- 代码 start -->
<view class="invitation-zhiwei-search">
<label class="cuIcon-search"></label>
<input type="text" v-model="filterText" placeholder="请输入职位名称" />
</view>
<view class="invitation-zhiwei-ul">
<text v-for="(item,index) in filterList" :key="index" @click="zwcok(index)">{{item.name}}</text>
</view>
<!-- 代码  end -->
</view>
</template>

​

2.js部分

 

<script>
export default {
data() {
return {
filterText: '',
zhiweilist: [{
id: 0,name: '全部'
},
{
id: 1,name: '地铁安检'
},
{
id: 2,name: '家政保洁'
},
{
id: 3,name: '电话销售'
},
{
id: 4,name: 'php后端开发'
}
],
}
},
onLoad() {},
computed: {
filterList() {
var arr = []
this.zhiweilist.forEach((item) => arr.push(item))
if (this.filterText) {
arr = this.zhiweilist.filter(item => item.name.includes(this.filterText))
}
return arr
}
},
methods: {
}
}
</script>

 

3.css部分

 

<style>
page {
background: #f3f4f6;
}
.invitation-zhiwei-ul text {
width: 100%;
height: 90rpx;
line-height: 90rpx;
display: block;
border-bottom: 1px #eaeaea solid;
box-sizing: border-box;
padding: 0px 3%;
color: #666;
font-size: 14px;
}
.invitation-zhiwei-search {
width: 100%;
height: 80rpx;
line-height: 80rpx;
background: rgba(0, 0, 0, .1);
display: flex;
flex-direction: row;
box-sizing: border-box;
padding: 0px 3%;
align-items: center;
justify-content: space-between;
}
.invitation-zhiwei-search input {
font-size: 14px;
width: 90%;
}
.invitation-zhiwei-search label {
font-size: 18px;
}
</style>

 

以上就是直播开发app，实时搜索、搜索引擎框实现的相关代码， 更多内容欢迎关注之后的文章