Vue 实现实搜索功能（前端搜索）

  • 用于前端的实时搜索
  • 要求：
  • 首先我的思路（本人新手思路）：
  • HTML部分：
  • 然后是JS部分：
  • 然后是方法：
  • 最后将方法放到Vue的监听里面：


用于前端的实时搜索

新人前端刚入行，不严谨请多指教

场景是这样的!

jquery select前端搜索 前端实现搜索功能_javascript

要求：

1、输入名称和位置能够实时显示检索内容
2、最少检索单位为一个字符串，有一个字符串匹配，则显示对应项
3、输入为空时，显示所有项，初始化也为所有项
4、检索为空，显示为空

首先我的思路（本人新手思路）：
  1. 先做CSS、HTML
  2. 在想逻辑(JS)：
    列表显示的后台数据怎么显示在前端页面=>数据里面哪些字段是我需要的=>怎么样去寻找相应的字段=>找到了相应的字段怎么样显示在前端
  3. 编写测试
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。也谈不上会，就是了解了一点。有也要入行前端的，或者同行大佬愿意指点交流的，请联系我😂