Vue 实现实搜索功能（前端搜索）
- 用于前端的实时搜索
- 要求：
- 首先我的思路（本人新手思路）：
- HTML部分：
- 然后是JS部分：
- 然后是方法：
- 最后将方法放到Vue的监听里面：
用于前端的实时搜索
新人前端刚入行，不严谨请多指教
场景是这样的!
要求：
1、输入名称和位置能够实时显示检索内容
2、最少检索单位为一个字符串，有一个字符串匹配，则显示对应项
3、输入为空时，显示所有项，初始化也为所有项
4、检索为空，显示为空
首先我的思路（本人新手思路）：
- 先做CSS、HTML
- 在想逻辑(JS)：
列表显示的后台数据怎么显示在前端页面=>数据里面哪些字段是我需要的=>怎么样去寻找相应的字段=>找到了相应的字段怎么样显示在前端 - 编写测试
HTML部分：
一开始对Vue没有多少理解，看视频学到双向绑定，觉得这个写实时搜索真的太好用了
先用v-model绑定input的value，方便传到后台
<!-- 右边弹窗 -->
<div id="monitorRecord" class="row">
<!-- 搜索框 -->
<div class="col-md-4 left" style="border: 1px solid black;">
<div class="searchRecord row">
<input type="search" class="cameraSearch " v-model="keyword" placeholder="输入设备位置/名称"><a
class="searchbtu fa fa-search" @keypress="getCommityCamera(keyword)"></a>
</div>
<!-- 展示列表 -->
<div style="height: 600px;overflow-y: auto;">
<div v-if="cameraData.length <= 0" v-show="nocameraData">
<ul v-for="cam in cameraList" class="camList" :key="cam.entityID.id">
<li class="selectedCam active" @click="getPhotoList(cam.entityID.id)">
<p>{{cam.name}}</p>
<p>位置：{{cam.position.address}}</p>
</li>
</ul>
</div>
<div v-if="cameraData.length > 0">
<ul v-for="cam in cameraData" class="camList" :key="cam.entityID.id">
<li class="selectedCam active" @click="getPhotoList(cam.entityID.id)">
<p>{{cam.name}}</p>
<p>位置：{{cam.position.address}}</p>
</li>
</ul>
</div>
</div>
</div>
</div>CSS部分就不作展示了。
然后是JS部分：
首先定义几个变量：
nocameraData:true, //搜索摄像头-控制旧数组的显示与否
keyword:'', //搜索摄像头-传入搜索关键字
cameraData:[]// 搜索摄像头-符合搜索条件的新数组,需要显示搜索结果就用它
cameraList:[]// 这个里面是后台传过来的数据，需要全部显示的时候就用它然后是方法：
接收输入的字符串，进行循环比较
getCommityCamera:function (searchword) {
let deviceName="";
let deviceLoca="";
this.cameraData.splice(0) ; //重置监控数组，显示原始数组
if(searchword == ''){
this.nocameraData =true //没有输入时 显示原始数组
}else{
for(i in this.cameraList) {
deviceName = this.cameraList[i].name;
deviceLoca = this.cameraList[i].position.address;
if(deviceName.indexOf(searchword)=="-1" && deviceLoca.indexOf(searchword)=="-1"){
//循环出不匹配的项
}else{
//循环出匹配项
this.cameraData.push(this.cameraList[i])
}
if(this.cameraData.length =='0'){
this.nocameraData =false //搜索完成后没有符合的条件，让旧数组也不显示
}
}
}
},最后将方法放到Vue的监听里面：
watch:{
//摄像头搜索条件监控
keyword(){
this.getCommityCamera(this.keyword)
}
}本人第一次跟着项目做前端，知识储备还不够，希望大家多提意见。放到这里就是想提高一下自己，这个代码里面肯定还有不到位的地方，还希望有兴趣的朋友多多指点
刚入行前端，从零开始学，无基础，之前是做测试的，有时间就记录一点
现在水平是刚入门，自学了html、css、javascript。也谈不上会，就是了解了一点。有也要入行前端的，或者同行大佬愿意指点交流的，请联系我😂
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
