JS仿百度搜索自动提示框匹配查询功能

};
this.init(options);
}
AutoComplete.prototype = {
constructor: AutoComplete,
init: function(options) {
this.config = $.extend(this.config, options || {});
}
var targetParent = $(this).parent();
$(targetParent).css({'position':'relative'});
if($('.auto-tips',targetParent).length == 0) {
/*
* 禁止 ctrl+v 和 黏贴事件
*/
$(item).unbind('paste');
$(item).bind('past;div style="width:200px;height:26px;border:1px solid #ccc;">
<input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
2. 当用户直接在输入框输入值时候 并没有键盘上移下移 或者 点击下拉框某一项时候 当鼠标失去焦点时候(blur) 当前输入框值为空 隐藏域值为空，这样做的目的 是为了防止上次form提交过后的数据仍然保存在隐藏域里面 当用户重新输入的时候 用户也并没有操作键盘上下移操作或者点击操作 再点击提交按钮时(失去焦点)，那么值为空 隐藏域值为空 这样防止搜索出来不是用户输入的那个东东。
</div>
<input type="button" value="提交"/>
JS代码如下：
/**
* JS 模糊查询
* @author tugenhua
* @date 2013-11-19
* @param 1.当前的input add targetCls
parentCls : '.parentCls', // 父级类
hiddenCls : '.hiddenCls', // 隐藏域input
searchForm :'.jqtransformdone', //form表单
var self = this,
_config = self.config,
_cache = self.cache;
// 鼠标点击输入框时候
$(_config.targetCls).each(function(index,item) {
e.preventDefault();
var target = e.target,
targetParent = $(target).closest(_config.parentCls);
* 2. 隐藏域里面统一增加同类名 叫 hiddenCls
* 3. 在各个父级元素上 添加类名 parentCls
*/
function AutoComplete (options) {
this.config = {
targetCls : '.inputElem', // 输入框目标元素
添加动态加载css文件 不需要引入css css全部在JS动态生成。
2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置)，因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数。
renderHTMLCallback : null, // keyup时 渲染数据后的回调函数
callback : null, // 点击某一项 提供回调
closedCallback : null // 点击输入框某一项x按钮时 回调函数
</div>
3. 支持页面上有多个输入框。
4. 支持鼠态的生成的，不需要额外的标签。如上面的 只需要input标签 其他的div标签不依赖 只需要父级元素增加class "parentCls"（当然可以自己配置类名），
</div>
<input type="hidden" class="hiddenCls"/>
</div>
<div class="parentCls">
<div style="width:200px;height:26px;border:1px solid #ccc;">
hoverBg : 'hoverBg', // 鼠标移上去的背景
outBg : 'outBg', // 鼠标移下拉的背景
isSelectHide : true, // 点击下拉框 是否隐藏
url : '', // url接口
height : 0, // 默认为0 不设置的话 那么高度自适应
manySelect : false, // 输入框是否多选 默认false 单选
$(this).val('');
$(_config.hiddenCls,targetParent) && $(_config.hiddenCls,targetParent).val('');
});
// 初始化时候 动态创建下拉框容器
$(targetParent).append($('<div class="auto-tips hidden"></div>'));
$('.auto-tips',targetParent).css({'position':'absolute','top':elemHeight,'left':'0px','z-index':999,'width':elemWidth,'border':'1px solid #ccc'});
<input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
</div>
<input type="hidden" class="hiddenCls"/>
$(item).keyup(function(e){
_cache.inputArrs = [];
var targetVal = $.trim($(this).val()),
keyCode = e.keyCode,
及要传给后台开发人员的隐藏域输入框 增加一个class "hiddenCls" 当然也可以自动配置参数。
我的模糊查询匹配的需求是这样的：
1. 每keyup时候 点击或者键盘上移下移操作 输入框填充用户名/工号 隐藏域填充工号 发请求 服务器返回数据 渲染出来。当然 隐藏域填充工号 值是form表单提交时候 后台要拿到提交过来的工号 所以需要这么一个隐藏域。
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth();
// 如果输入框值为空的话 那么隐藏域的value清空掉
<input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
</div>
<input type="hidden" class="hiddenCls"/>
3. 当用户点击某一项时候 或者 上移下移时候 输入框动态的生成值 且输入框值现在不能重新输入 只有当点击输入框x的时候 才可以重新输入。
4. 已经遗留输入框可以多选的接口 目前还未完善输入框多选的操作。
5. 禁止ctrl+v 或者右键 粘贴操作。
下面HTML代码如下：
<div class="parentCls">
if(targetVal == '') {
var curParents = $(this).closest(_config.parentCls);
$(_config.hiddenCls,curParents).val('');
</div>
<input type="hidden" class="hiddenCls"/>
</div>
<div class="parentCls">
<div style="width:200px;height:26px;border:1px solid #ccc;">
};
this.cache = {
currentIndex : -1,
oldIndex : -1,
inputArrs : [] // 多选时候 输入框值放到数组里面去
如下代码：
<div class="parentCls">
<div style="width:200px;height:26px;border:1px solid #ccc;">
<input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>