This is the 15th day of my participation in Gwen Challenge
In the front-end development process, the use of the search function is also a common function in the project development process, more common requirements. Search box function commonly used several requirements are also more or less the same, but the practical search box can be used as an example to write is very necessary, so this blog to share the front-end development with lenovo function of the custom search box.
The specific implementation steps of the search box with association function are not complicated, mainly the logical processing that should be careful, this case to search for employee information to do the requirements, the specific operation is as follows:
<template> <div class="information-content"> <div class="batch-search"> <div class="bindingbtn"> <input type="text" Placeholder =" placeholder=" v-model= "employee" class="input_type" @change="changeEvent" /> <div class="inputicon" @click="clearValue"> <img src="~@/assets/svg/yonghu.png" height="30" width="30" /> </div> </div> <div class="search-result" v-show="isshow"> <p v-for="(item, index) in selectEmployees" :key="index" @click="searchResult(item)"> {{ item.jobNumber }} {{ item.name }} </p> </div> <! <van-empty v-if="selectEmployees. Length === 0" description=" No data "/> </div> </div> </template> <script> export default { data() { return { isshow: true, employee: "", // This array is the data source of the employee information. In this case, write the data directly for easy access. allEmployees: [{" name ":" 1 "three the shopkeeper," jobNumber ", "B1-63354", "deptId:" 1265, "the deptName" : "architecture department - architecture a"," JobType ":" 1 "}, {" name ":" three the shopkeeper 2 ", "jobNumber" : "B1-63359", "deptId:" 1265, "the deptName" : "products - product development", "jobType" : "1"}, {" name ":" three the shopkeeper 3 ", "jobNumber" : "B1-63358", "deptId:" 1265, "the deptName" : "architecture department - architecture", "jobType" : "1"},], selectEmployees: [], inputvalue: "", }; }, watch: { employee: function (val, oldVal) { if (val.length == 0) { this.isshow = false; } else { this.isshow = true; var employees = []; this.allEmployees.forEach((item, index) => { if (item.indexOf(val) >= 0) { employees.unshift(item); }}); this.selectEmployees = employees; }},}, methods: {// Clear input box clearValue() {this.inputValue = ""; }, changeValue: function (value) { this.inputvalue = value; }, searchResult(item) { this.isshow = false; this.$emit("changeEvent", item); </script> <style lang=" SCSS ">. Search -box {position: relative; .batch-search { margin: 15px; .bindingbtn { border: 1px solid #000; display: flex; border-radius: 5px; padding: 5px 10px 5px 10px; .input_type { height: px2em(30); border: none; background: none; flex: 1; } .no-msg { margin-top: 20px; } .inputicon { img { width: px2em(30); height: px2em(30); } } } .search-result { z-index: 10; position: absolute; padding-left: 15px; left: 0; top: 60px; width: 100%; height: px2rem(100); overflow-y: hidden; background: #fff; } } .wrapper { display: flex; align-items: center; justify-content: center; height: 100%; } } </style>Copy the codeSpecific renderings are as follows:
