vue输入框搜索实现模糊查询

最新推荐文章于 2024-05-23 09:58:10 发布

今天也是想要暴富的ZP啊

最新推荐文章于 2024-05-23 09:58:10 发布

阅读量1.3w

点赞数 8

文章标签： vue搜索框模糊查询

本文链接：https://blog.csdn.net/qq_42534317/article/details/87191671

版权

<template>
    <div id="search_carseries">
        <div class="search_carseries_wrap">
            <div class="search">
                <div class="search_input">
                    <input type="text" v-model="searchval" @input="autosearch()"/>
                    <div class="search_icon">
                        <img :src="searchicon"/>
                    </div>
                </div>
            </div>
            <div class="search_carseries_inner"></div>
            <div class="carseries_list_wrap">
                <div class="carseries_list" v-for="(item,index) in oldlist" :key="index" >
                    <input type="radio" :id="item.radio" :value="item.value"  name="seriescar">
                    <label :for="item.radio" @click="Selected(item.value)"><span>{{item.value}}</span></label>
                </div> 
            </div>
        </div>
    </div>
</template>
<script>
import {getCarList} from '../../api/aftersalesh5';
import searchicon from "../../assets/img/search@3x.png";
import Cookies from 'js-cookie'; //引入cookie
export default {
    data(){
        return{
            searchicon:searchicon,
            carseriesList:[],//获取的车型车系数据
            searchval:"",//输入框输入的值
            newlist:[
                  {value:"张孟真",radio:"a1"},
                  {value:"车系名称2",radio:"a2"},
                  {value:"杨磊",radio:"a3"},
                  {value:"张平",radio:"a4"},
                  {value:"邱敏",radio:"a5"},
                  {value:"陈强",radio:"a6"},
                  ] ,
            oldlist:[{value:"张孟真",radio:"a1"},
                  {value:"车系名称2",radio:"a2"},
                  {value:"杨磊",radio:"a3"},
                  {value:"张平",radio:"a4"},
                  {value:"邱敏",radio:"a5"},
                  {value:"陈强",radio:"a6"}
                  ]
        }
    },
    created(){
        //获取的车型车系数据
        this.getCarSeries();    
    },
    methods:{
    autosearch(){
        this.oldlist=[];
        //字符串方法indexOf
        for(let i=0;i<this.newlist.length;i++){
            //如果字符串中不包含目标字符会返回-1
            if(this.newlist[i].value.indexOf(this.searchval)>=0){
                this.oldlist.push(this.newlist[i]);
            }         
        }
        return this.oldlist;    
    },    
    getCarSeries(){
        getCarList({isAfterSale:true}).then(res=>{
            console.log(res.data)
        })
    },
    Selected(val){
        console.log('2被选中的值为'+val);
        Cookies.set('carSeries', val);
    },
  }
}
</script>

<style lang="scss" scoped>
   .search_carseries_wrap{
       position: relative;
       .search{
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           width: 100%;
           height: 4.28rem;
           background: #F6F6F9;          
           .search_input{
               width: 92%;
               height: 2.39rem;
               border: 1px solid #D8DDE6;
               position: fixed;
               top: 0.943rem;
               bottom: 0;
               left: 0;
               right: 0;
               margin: 0 auto;
               background: #fff;
               border-radius: 5px;
               input{
                   border: none;
                   width: 100%;
                   height: 100%;
                   line-height: 2.39rem;
                   padding:0 0.5rem; 
               }
           }
           .search_icon{
               width: 2.5rem;
               height: 2.39rem;
               position: absolute;
               right: 0;
               top: 0;
               img{
                   width: 60%;
                   height: 60%;
                   position: absolute;
                   left: 0;
                   right: 0;
                   top: 0.38rem;
                   bottom: 0;
                   margin: 0 auto;
               }
           }
       }
   }
   .search_carseries_inner{
       width: 100%;
       height: 4.28rem;;
   }
   .carseries_list_wrap{
       width: 100%;
       .carseries_list{
           height: 2.52rem;
           width: 100%;
           overflow: hidden;
           label{
               width: 100%;
               height: 2.52rem;
               display: inline-block;
               float: right;   
               padding-left: 0.5rem;
               margin-right: -1rem;
               span{
                   display: inline-block;
                   width:88%;
                   height: 2.52rem; 
                   border-bottom: 1px solid #D8DDE6;
                   line-height: 2.52rem;
                   color: #1D1F20;
                   font-size: 0.88rem;
               }
           }
           input[type="radio"] + label::before {
            content: "\a0"; /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            width: 1.26rem;
            height:1.26rem;
            margin-right: 0.7rem;
            border-radius: 50%;
            border: 1px solid #D8DDE6;
            text-indent: .15em;
            line-height:1.26rem; 
        }
            input[type="radio"] {
                position: absolute;
                clip: rect(0, 0, 0, 0);
            }
            input[type="radio"]:checked + label::before {
                background-color: #0E89E3;
                background-clip: content-box;
                padding: .2em;
            }
       }
   }
</style>