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>

基本配置

参数
功能
默认值

getSearchName
获取搜索文本

data
数据格式 [{label: ‘飞机’, value: 1}]

visibleInput
是否隐藏搜索框
false

autoQuery
是否输入后就触发
true

width
设置输入框宽度值
210

delay
请求延时间隔(autoQuery为false时)
500

git地址