思路:给输入框绑定两个事件,一个是键盘按下另一个是键盘抬起,按下时记录上一个值,抬起时获取新输入的值,将二者长度进行对比如果有改变则发起请求。最后将请求的结果放到datalist标签进行展示以供选择。
html
<input type="text" class="form-control" list="cars" onkeyup="keyUp(this)" onkeydown="keydown(this)"/>
<datalist id="cars">
<option v-for="(v,i) in customerTemp.managerInfoList" :value="v">{
{v}}</option>
</datalist>
js
var vm = new Vue({
el:'#baseinfo',
data:{
customerTemp.managerInfoList: []
}
)}
var oldValue = "";
function keyUp(obj){
let newValue = obj.value;
if (newValue.length > oldValue.length){
console.log("发起请求:"+newValue);
//模拟后端返回数据
vm.customerTemp.managerInfoList