Vue makes a searchable drop-down box

This time I will bring you a searchable drop-down box with Vue. What are the precautions for making a searchable drop-down box with Vue? Here is a practical case, let’s take a look.

Practice deepens the understanding of vue and is an effective way to use it. This article is based on the implementation of a searchable drop-down box customized component of vue, which is recorded here.

1. Effect

2. Component code

dropdown.vue

<template>
  <p class="vue-dropdown default-theme" v-show-extend="show">
    <p class="search-module clearfix" v-show="length">
      <input class="search-text" 
      @keyup=&#39;search($event)&#39; :placeholder="placeholder" />
      <span class="glyphicon glyphicon-search search-icon"></span>
    </p>
    <ul class="list-module" v-show="length">
      <li v-for ="(item,index) in datalist" @click="appClick(item)" 
      :key="index">
        <span class="list-item-text">{{item.name}}</span>
      </li>
    </ul>
    <p class="tip__nodata" v-show="!datalist.length">{{nodatatext}}</p>
  </p>
</template>
<script>
  export default {
    data(){
      return {
        _datalist:this.itemlist.concat(),
        datalist:this.itemlist.concat(),
        length:this.itemlist.length
      }
    },
    props:{
      'show':{//用于外部控制组件的显示/隐藏
        type:Boolean,
        default:true
      },
      'itemlist':Array,
      'placeholder':String,
      'nodatatext':String
    },
    directives:{
      'show-extend':function(el,binding,vnode){//bind和 update钩子
        let value = binding.value,searchInput = null;
        if(value){
          el.style.display='block';
        }else{//隐藏后，恢复初始状态
          el.style.display='none';
          searchInput = el.querySelector(".search-text");
          searchInput.value = '';
          vnode.context.datalist = vnode.context.itemlist;//还原渲染数据
        }
      }
    },
    methods:{
      appClick:function(data){
        this.$emit('item-click',data);
      },
      search:function(e){
        let vm = this,searchvalue = e.currentTarget.value;
        vm.datalist = vm.$data._datalist.filter(function(item,index,arr){
          return item.name.indexOf(searchvalue) != -1;
        });
      }
    },
    mounted:function(){
    }
  }
</script>
<style lang="scss" scoped>
  .vue-dropdown.default-theme {
    position: absolute;
    left:15%;
    display: none;
    width: 70%;
    margin: 0 auto;
    margin-top: 1em;
    padding: 1em;
    z-index:10;
    box-shadow: 0px 0px 10px #ccc;
    &._self-show {
      display: block!important;
    }
    .search-module {
      position: relative;
      .search-text {
        width: 100%;
        height: 30px;
        padding-right: 2em;
        padding-left:0.5em;
        border-radius: 0.5em;
        box-shadow: none;
        border: 1px solid #ccc;
        &:focus {
          border-color: #2198f2;
        }
      }
      .search-icon {
        position: absolute;
        top: 24%;
        right: 0.5em;
        color: #aaa;
      }
    }
    .list-module {
      max-height: 200px;
      overflow-y: auto;
      li {
        &._self-hide {
          display: none;
        }
        margin-top: 0.5em;
        padding: 0.5em;
        &:hover {
          cursor:pointer;
          color: #fff;
          background: #00a0e9;
        }
      }
    }
  }
  .tip__nodata {
    font-size: 12px;
    margin-top: 1em;
  }
</style>

3. Component usage

<dropdown :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext"></dropdown>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use jquery layur pop-up layer in actual projects

How does Angular CLI implement an Angular project

The above is the detailed content of Vue makes a searchable drop-down box. For more information, please follow other related articles on the PHP Chinese website!