由于jquery时代过去太久，现在手里刚好有个项目用到jquery和bootstrap等一系列技术，接了一个需求，页面上需要一个支持远程搜索的组件，原本以为项目有现成拿过来用的组件（碰坑），漏算了。
此项目里下拉框要不是固定选项，要不就是一次性返回的下拉数据，搜索也是在本地做的。看来只能和jquery一起折腾了。首先，规划了下要的组件需要满足那些功能，然后针对性的去网上找了下相关的资料，突然感觉只能从零开始了.............
经过漫长的时间，网上找到了一个支持远程搜索的select下拉组件，现有的功能满足了一大半，用vue封装的一些组件用久了，再来用这些，确实有些不习惯。
业务场景：
1.在表单页面里需要个下拉框支持远程搜索（不要求分页）
2.不需要考虑下拉选项数据几个或者是固定的情况
3.禁止文本框输入一些值生效，只能通过下拉选项回写值，需要有一个按钮一键清除文本框的内容
4.为了提高些用户体验，请求数据时，在文本框右侧显示loading状态
5.不需要考虑父级别overflow：hidden 挡住元素，不需要考虑在一个页面上多个滚动条出现情况下使用 的复杂问题
6.用户搜索没有返回数据，需要显示无数据提示
7.用户操作聚焦文本框，就请求数据，默认加载20条
8.不需要多选
基于以上需求，在网上找的一个组件基础上 优化了以下几点：
1.增加了防抖，防止请求条件和请求结果没有对应
2.增加了focus直接请求数据
3.处理异常和没有数据的情况处理
4.添加缓存函数 若查询name+url相同，直接返回缓存的数据
5.文本框显示进度条
6.增加清除数据按钮
也修复了一些问题，列出如下，供参考以后免踩坑：
1.按键事件需要处理，点击空白处判断问题，这里我做了个判断就是focus状态才显示然后请求数据
2.没有数据的情况，弹框有显示边框
// 先给 元素 绑定了三个事件 blur keyup focusthis.$element.on('blur', $.proxy(this.blur, this)) .on('keyup', $.proxy(this.keyup, this)) .on('focus', $.proxy(this.keyup, this)); //往元素增加 loading元素和 clear元素this.$element.after("<div class='clear' id='"+this.clearID.slice(1)+"' \"><i class=\"ace-icon fa fa-remove I-pointers\"></i></div>"); this.$element.after("<div class=\"loading\"><span></span></div>"); // 给下拉选项增加click事件this.$element.parent('.remote_duyiwuer_wrapper').on('click',this.ulID, $.proxy(this.click, this)); // 给clear按钮绑定清除内容方法this.$element.parent('.remote_duyiwuer_wrapper').on('click',this.clearID, $.proxy(this.clear, this)); // 核心内容看 请求处理function () { console.log('ajaxer') varthat=this, query=that.$element.val().trim(); if(this.ulBlur) returnconsthitData=this.cacheData[query+that.ajax.url]; if (hitData) { console.log('命中数据') returnhitData; } that.$element.attr('data-loading',"1"); that.uuid+=1; // 每个方法调用的内部变量 fetchIdconstfetchUid=that.uuid; that.query=query; if (that.ajax.timerId) { clearTimeout(that.ajax.timerId); that.ajax.timerId=null; } that.ajax.timerId=setTimeout(function() { varparams= { name : query }; $.post(that.ajax.url, params, function(data){ console.log(data) if (fetchUid!==that.uuid) { console.log('被拦截的一些请求组',query) return; } that.$element.attr('data-loading',""); console.log('通过的一些请求组',query) constresponse=that.render(data.list) that.cacheData[query]=response// return response }).error(function () { that.render([]) that.$element.attr('data-loading',""); }); that.ajax.timerId=null; }, that.ajax.timeout); returnthat; }
