由于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 focus
this.$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')
var that = this,
query = that.$element.val().trim();
if(this.ulBlur) return
const hitData = this.cacheData[query+that.ajax.url];
if (hitData) {
console.log('命中数据')
return hitData;
}
that.$element.attr('data-loading',"1");
that.uuid += 1;
// 每个方法调用的内部变量 fetchId
const fetchUid = that.uuid;
that.query = query;
if (that.ajax.timerId) {
clearTimeout(that.ajax.timerId);
that.ajax.timerId = null;
}
that.ajax.timerId = setTimeout(function() {
var params = { 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)
const response=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);
return that;
}
