Jquery 实时搜索

思路:给输入框绑定两个事件,一个是键盘按下另一个是键盘抬起,按下时记录上一个值,抬起时获取新输入的值,将二者长度进行对比如果有改变则发起请求。最后将请求的结果放到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 
上一篇:Vue中gsap库实现数字递增动画


下一篇:js实现对sessionStorage中的值进行监听