自动匹配，使用的场景提供查询过程通过输入的变化，第一时间完成响应，几乎可以达到实时的显示查询的结果，区别于选择框的方式，更加友好的提供查询功能。
自动匹配
自动匹配控件的支持，不仅仅通过固定的查询内容作为数据范围提供匹配的过程，而是通过输入内容的变化，通过接口完成请求，利用响应的结果进行显示，完成类似选择的效果来实现几乎实时的查询效果。
所以，查询的方式可以分为两类，一是支持固定查询数据范围的自动匹配，二是通过参数请求的方式完成自动匹配。通过一种控件的方式，实现两种不同查询方式的实现。
自动匹配功能控件，一般前台框架都有相应的支持。一般是利用输入框聚焦的同时，提供一个下拉效果，而下拉效果中存在一个输入框提供查询内容的输入过程。选择Typeahead的一个原因，可以利用普通的输入框来实现自动匹配的方式，不需要特殊的效果支持进行实现。
Typeahead与选择框功能类似的同时，存在一个较为麻烦的处理过程，就是获取选择值的处理。一般情况去，利用val类似的方法来获取选择值对应的键值，之后根据具体的业务来完成后续的操作。但是，存在一些特殊的场景，根据请求的过程来订制响应结果中显示内容以及对应的键值，来做到不同业务、不同功能的统一处理。所以，在Typeahead原有的功能基础上，调整开源代码来支持该特性。
利用Typeahead支持的同时，前台架构中拓展特定的方法来简化模块调用过程。主要提供初始化、获取值、更新、重置、清空对应的处理过程。
引用代码，框架为JQuery作为基础，控件为Layer和Typeahead作为功能。
...
/**
* 初始化自动补全 , 利用接口完成基础数据获取
* @param id 页面标签/元素ID/样式class
* @param url 请求地址
* @param args 请求参数
* @param result 返回结果名称
* @param key 补全元素key值
* @param value 补全元素value值
* @param callback 回调方法 , 选中元素之后执行
*/
core.autoTypeahead: function (container, url, name, args, result, key, value, callback){
// 根据参数不同类型 , 获取容器对象
if(container && typeof(container) == "object" && container.length) container = container;
else if(container && typeof(container) == "object") container = [container];
else if(container && typeof(container) == "string") container = core.focusPage(!/\W+/.test(container) ? '#' + container : container);
else return false;
// 初始化容器为自动匹配控件
var $ele = container.typeahead({
url: url,
list: [],
postData: {},
source: function (query, process) {
var options = {};
options[name] = query;
core.post(this.options.url, $.extend(options, args), $.proxy(this.options.callback, this));
}, matcher: function (item) {
return true;
}, callback: function (data) {
this.options.list = data[result];
this.flprocess(this.options.list, key, value);
},
isResultTypeMap: true,
flupdater: function (k, v) {
if(callback) return callback(this.options.list, k, v);
else return v;
}
});
},
...
...
/**
* 初始化自动补全 , 提供基础数据 , 无需发生请求
* @param id 页面标签/元素ID/样式class
* @param data 基础数据
* @param key 补全元素key值
* @param value 补全元素value值
* @param callback 回调方法 , 选中元素之后执行
*/
core.selectTypeahead: function (container, data, key, value, callback){
// 根据参数不同类型 , 获取容器对象
if(container && typeof(container) == "object" && container.length) container = container;
else if(container && typeof(container) == "object") container = [container];
else if(container && typeof(container) == "string") container = core.focusPage(!/\W+/.test(container) ? '#' + container : container);
else return false;
// 初始化容器为自动匹配控件
var $ele = container.typeahead({
list: data,
source: function (query, process) {
var res = [];
var data = this.options.list;
// 判断查询内容长度 , 小于2则返回固定结果 , 否则根据内容进行查询
if(query.length < 2){
res = data.slice(0, 5);
}else{
$.each(data, function(i, v){
if(v[value].indexOf(query) != -1) res.push(v);
});
}
$.proxy(this.options.callback, this)(res);
}, matcher: function (item) {
return true;
}, callback: function (list) {
this.flprocess(list, key, value);
},
isResultTypeMap: true,
flupdater: function (k, v) {
if(callback) return callback(this.options.list, k, v);
else return v;
}
});
},
...
...
/**
* 获取自动补全key值
* @param id 页面标签/元素ID
* @param defaults 请求地址
* @param isKey 是否获取key , 否则为val的信息
* @return 自动补全的key/value
*/
core.typeahead: function(container, defaults, isKey){
// 根据参数不同类型 , 获取容器对象
if(container && typeof(container) == "object" && container.length) container = container;
else if(container && typeof(container) == "object") container = [container];
else if(container && typeof(container) == "string") container = core.focusPage(!/\W+/.test(container) ? '#' + container : container);
else return false;
var _ = container.attr('data-typeahead-key');
if(isKey) _ = container.val();
if(!defaults) defaults = '';
return _ ? _ : defaults;
},
...
...
/**
* 更新自动补全 , 显示内容 , 对应key值
* @param id 页面标签/元素ID
* @param key 补全元素key值
* @param value 补全元素value值
*/
core.updateTypeahead: function(container, key, value){
// 根据参数不同类型 , 获取容器对象
if(container && typeof(container) == "object" && container.length) container = container;
else if(container && typeof(container) == "object") container = [container];
else if(container && typeof(container) == "string") container = core.focusPage(!/\W+/.test(container) ? '#' + container : container);
else return false;
container.val(value).attr('data-typeahead-key', key);
},
...
...
/**
* 重置自动补全数据源
* @param id 页面标签/元素ID
* @param data 数据源
*/
core.resetTypeahead: function(container, data){
// 根据参数不同类型 , 获取容器对象
if(container && typeof(container) == "object" && container.length) container = container;
else if(container && typeof(container) == "object") container = [container];
else if(container && typeof(container) == "string") container = core.focusPage(!/\W+/.test(container) ? '#' + container : container);
else return false;
container.typeahead("list", data)
},
...
...
/**
* 获取自动补全对应key值
* @param id 页面标签/元素ID
*/
core.cleanTypeahead: function(container){
// 根据参数不同类型 , 获取容器对象
if(container && typeof(container) == "object" && container.length) container = container;
else if(container && typeof(container) == "object") container = [container];
else if(container && typeof(container) == "string") container = core.focusPage(!/\W+/.test(container) ? '#' + container : container);
else return false;
container.val("").removeAttr('data-typeahead-key');
},
...
JQuery更多使用说明，参考JQuery官方网站。
Typeahead具体使用方法，参考Typeahead官方网站。
LayUI（Layer）所有使用方式，参考LayUI官方网站，了解更多功能。