直播開發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，實時搜尋、搜尋引擎框實現的相關程式碼， 更多內容歡迎關注之後的文章