vue点击弹框搜索列表功能

先看下开发完成的功能

本来想借助 element-ui 里的 el-select 和 el-input 组合来做

但是在input框里面输入内容不能用上下键选择到具体搜出来的列表

还有一个问题是当用上下键操作时移到最后一行

再回到第一行的时候它会类似锚点一样定位到第一行

从而把input框卷入到不可见的区域去了

所以觉得这样的体验不是很好，自己就重新做了一个

已经上传了到 npm 上去了

• npm下载地址

npm install --save v-select-search

• 引用

import 'v-select-search/lib/v-select-search.css';
import vSelectSearch from 'v-select-search';

Vue.use(vSelectSearch);

• demo

<template>
  <div style="width:250px;overflow:hidden;margin:250px auto;">
    <ct-select
      v-model="text"
      @getSearchName="getName">
      <ct-option
        v-for="(item, index) of dataList"
        :key="index"
        :value="item.value"
        :label="item.label">
      </ct-option>
    </ct-select>
  </div>
</template>

<script type="text/javascript">
  import axios from 'axios';
  export default {
      name: '',
      data() {
          return{
              text: '',
              dataList:[],
          }
      },
      mounted() {
        axios.get('/v2/book/search?q=vue&alt=json&start=1&count=45')
        .then((data)=>{
            this.dataList = [];
            for(let v of data.data.books) {
              this.dataList.push({
                value: v.id,
                label: v.title
              })
            }
        })
        .catch(function(error){
            console.log(error);
        });
      },
      methods: {
        getTextHandler() {
          console.log(this.text);
        },
        getName(val) {
            axios({
              method:'POST',
              url:'/v2/book/search',
              data:{
                  q: val,
                  alt:'json',
                  start: 1,
                  count: 15
              }
            }).then((data)=>{
                this.dataList = [];
                for(let v of data.data.books) {
                  this.dataList.push({
                    value: v.id,
                    label: v.title
                  })
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },
      }
  }
</script>

• 基本配置

git地址