先看下开发完成的功能
本来想借助 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 地址