/**
* @author wsf(自动补全动补全 支持键盘上下键)
*/
;
(function (win,$){
// 客户自动补全对象
function _autoComplete(){
this.dataUrl = "/xxxx/customerwidget/queryAllCustName.do";// action
this.data = null;// 数据
this.target = null;// 作用于哪个元素(input)
this.defaultText = "搜索：全称/简称/首字母";//输入框默认显示字符
this.autoName = ["INITIALALLNAME","FULLNAME"];//自动补全名称
this.panelWidth = 385;
this.panelHeight = 360;
this.event = {
"click":this.click,
"focus":this.focus,
"keyup":this.keyup,
"keydown":this.keydown,
"blur":this.blur,
"input propertychange":this.propChange
};
this.isArrawKey = false;// 是否是上下键
this.log = function (msg){
console.log(msg);
},
//自定义函数（比如说按下 enter键后）
this.customerFn = function (){
}
}
// 原型对象
_autoComplete.prototype = {
// 构造函数
curstructor:_autoComplete,
//获取数据
getData:function (){
var that = this;
$.getJSON(this.dataUrl,function (data){
that.data = data;
})
},
// 入口函数
autoCompleteStart:function (targetid){
if(this.data==null);
this.getData();
this.target = $("#"+targetid);
this.target.bind(this.event,this);
},
// 单击事件
click:function(e){
var that = e.data;
var _val = $(that.target).val();
if(_val.indexOf("搜索：")>=0)
$(that.target).val("");
else{
that.autoComplete.call(that,e,_val);
}
},
// 获得焦点事件
focus:function (e){
var that = e.data;
var keycode = e.which;
},
// 松开键盘
keyup:function (e){
var that = e.data;
var keycode = e.which;
var _val = $(that.target).val();
if(!$.trim(_val)){
$("#autoComoplete").slideUp(300);
}else {
if(!that.isArrawKey)
that.autoComplete.call(that,e,_val);
}
that.isArrawKey = false;
},
// 按下键盘
keydown:function(e){
var that = e.data;
var keycode = e.which;
if(keycode == 13){
$(that.target).blur();
}
var _kids,_first,h = [];
_kids = $("#autoComoplete").find("li");//
_first = _kids.first();// 第一个孩子
h = _kids.filter(function (){
return $(this).attr("downSelected") == "true";//被选过
});
if(keycode == 40){
that.isArrawKey = true;// 向下箭头
if(!h[0]){
// 没有被选中过
_first[0].setAttribute("downSelected",true);
_first.css("background-color","rgb(251, 236, 136)");
$(that.target).val(_first.text());
}else{
// 有选中的
h[0].setAttribute("downSelected",false);
h.css("background-color","#FFF");
var _nxt = h.next();
_nxt[0].setAttribute("downSelected",true);
_nxt.css("background-color","rgb(251, 236, 136)");
$(that.target).val(_nxt.text());
}
}
if(keycode == 38){
that.isArrawKey = true;// 向上箭头
if(h[0]){
// 有选中的
h[0].setAttribute("downSelected",false);
h.css("background-color","#FFF");
var _prev = h.prev();
_prev[0].setAttribute("downSelected",true);
_prev.css("background-color","rgb(251, 236, 136)");
$(that.target).val(_prev.text());
}
}
},
// 失去焦点
blur:function (e){
var that = e.data;
var keycode = e.which;
$("#autoComoplete").slideUp(300);
var _val = $(that.target).val();
if(!$.trim(_val)){
$(that.target).val(that.defaultText);
}
},
// propertychange事件
propChange:function (e){
var that = e.data;
that.log("porp");
var keycode = e.which;
var _val = $.trim($(that.target).val());
if(!_val){
$("#autoComoplete").slideUp(300);
$(that.target).val(that.defaultText);
}
},
// 自动补全主方法
autoComplete:function (e,value) {
if(!value) return;
var srcEle = $("#autoComoplete");
var html = [];
var _d = this.data;
for(var i = 0 ;i < _d.length;i++){
var item = _d[i];
var shouzimu = item[this.autoName[0]];//;
var name = item[this.autoName[1]];//
var idx = name.indexOf(value);
var idx2 = shouzimu.indexOf(value);
if(idx >= 0||idx2>=0){
var _id = item.ID;
var prev,last;
if(idx2>=0){
var _len = value.length;
prve = name.substring(0,_len);
last = name.substring(_len);
var _name = "<font color='blue' style='font-weight:bold;'>" + prve + "</font>" + last;
html.push('<li class="autoItem" style="height:24px;line-height:24px;overflow:hidden;list-style:none;font-size:13px;margin:10px 0 8px 0;cursor:pointer;"><a id='+_id+'>' + _name + "</a></li>");
}else if(idx>=0){
prev = name.substring(0,idx);
last = name.substring(idx+value.length);
var _name = prev + "<font color='blue' style='font-weight:bold;'>" + value + "</font>" + last;
html.push('<li class="autoItem" style="height:24px;line-height:24px;overflow:hidden;list-style:none;font-size:13px;margin:10px 0 8px 0;cursor:pointer;"><a id='+_id+'>' + _name + "</a></li>");
}
}
}
if(html.length==0){
$("#autoUl").html("");
return;
}
html = html.slice(0,10);//值取前十条
var _pos = $(this.target).position();
var _inputHeight = $(this.target).height();
if(!srcEle[0]){
var div = $("<div id='autoComoplete' style='diplay:none;'><div>");
var ul = $("<ul id='autoUl'></ul>");
ul.append(html).appendTo(div);
ul.css({
"padding":"0",
"margin":"0",
"padding-left":"15px",
});
div.css({
"position":'fixed',
"top":_pos.top+_inputHeight,
"left":_pos.left,
"background-color":"#fff",
"border":"1px solid lightblue",
"width":this.panelWidth + "px",
"height":this.panelHeight + "px",
"overflow":"hidden",
"border-top":"none",
"z-index":"9999999999"
});
div.appendTo($("body")).slideDown(300);
}else{
$("#autoUl").html(html);
srcEle.css({
"position":'fixed',
"top":_pos.top+_inputHeight,
"left":_pos.left,
});
srcEle.slideDown(300);
}
this.after();
},
//列表显示后函数
after:function (){
$(".autoItem").hover(function (){
$(this).addClass("currentLi");
},function (){
$(this).removeClass("currentLi");
}).click(function (){
$(this.target).val($(this).find("a").text());
$(this).parent().parent().slideUp(300);
});
}
}
win._autoComplete = _autoComplete;// 外部调用入口
})(window,jQuery);
/**
* 调用方式
* var ac = new _autoComplete();//自动补全
ac.defaultText = "";
ac.panelWidth = 300;
//还可以设置其他自定义属性
ac.customerFn = $.commonSearch;//一个搜索函数（当敲下enter键后回执行此方法）
ac.autoCompleteStart("custCnName");//input id
*/
相关推荐
**JavaScript自动补全功能详解** JavaScript自动补全（也称为智能提示或代码补全）是开发者在编写代码时的一种高效工具，它能提供基于上下文的建议，帮助快速输入语句，提高编程效率。在本篇文章中，我们将深入探讨...
JavaScript文本框下拉自动补全提示是一种常见的交互设计，它极大地提升了用户在输入时的效率和体验。在网页开发中，这种功能常用于搜索框、表单输入等场景，允许用户在输入过程中根据已有的数据集获取匹配的建议，...
JavaScript自动补全功能，也称为智能提示或自动完成，是一种常见的前端交互设计，常用于搜索引擎、表单输入等场景，以提升用户体验。本代码示例实现了基础的自动补全功能，但AJAX部分需要开发者自行添加。以下是关于...
在压缩包内的“自动补全提示输入框”文件中，你应该能够找到实现这一功能的JavaScript代码，包括输入事件监听、模糊搜索算法、匹配项渲染以及键盘事件处理等部分。通过阅读和理解这些代码，你可以学习到如何在实际...
3. **事件监听**：在JavaScript中，可以使用`addEventListener`方法监听用户的键盘输入事件，如`input`或`keyup`，在事件触发时调用处理函数，更新补全列表。 4. **DOM操作**：为了在页面上显示补全建议，JS需要...
Ajax请求成功后，会执行回调函数，这里可以处理服务器返回的数据。数据通常是JSON格式，包含一系列建议的搜索词。例如，可以遍历数据并创建HTML元素展示在`#autoComplete`元素内。 5. **搜索回调函数**： 可以...
jQuery 自动补全搜索框控件是Web开发中常用的一种功能，它极大地提高了用户体验，尤其在需要用户输入关键字进行查询的场景下。该控件基于jQuery库，通过实时匹配用户输入，动态显示一个建议列表，帮助用户快速找到...
这个插件可能具有处理大量数据的能力，适合大数据集下的自动补全需求。 2. **基本原理**： 自动补全的基本原理是监听用户在输入框中的输入事件，如键盘按键或删除操作。每当输入变化时，会触发一个请求到服务器，...
在这个例子中，`handleQueryChange`函数处理输入框内容的变化，根据查询内容过滤数据源并更新到组件状态。`data`属性是包含所有可能补全选项的数据源，`placeholder`定义了输入框的占位提示，而`onChangeText`和`...
在JavaScript中，可以使用正则表达式或自定义函数来实现。 4. **显示面板**：展示匹配项的区域，通常是一个下拉列表，随着用户输入动态更新。这个面板需要良好的样式设计，以适应不同场景下的视觉需求。 5. **事件...
在本实例中，我们将深入探讨如何实现一个类似百度或Google搜索的自动补全功能，这个功能可以在用户输入时动态地提供建议，提高用户体验。 首先，我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象，它...
综上所述，jQuery自动补全插件通过监听用户输入、发送AJAX请求、处理返回数据以及动态渲染提示列表，实现了类似百度搜索的自动提示功能。开发者可以根据需求调整插件参数，自定义提示样式，以适应不同的应用场景。在...
综上所述，这个示例旨在演示如何使用jQuery UI Autocomplete插件，特别是配合键盘上下选择功能，以及处理不同类型的提示数据源，包括静态数组、动态Ajax请求和函数回调。对于前端开发者来说，理解和掌握这一功能将有...
最后，`js`目录可能包含了除jQuery之外的其他JavaScript库或自定义脚本，如用于辅助处理AJAX请求、数据绑定或者UI交互的函数。 总结起来，这个实例展示了如何利用Java后端和jQuery前端，结合AJAX技术，实现一个动态...
jQuery Suggest插件还支持多种高级特性，如自定义显示模板、过滤逻辑、回调函数等，可以根据实际需求进行配置。例如，可以设置一个模板来展示建议项的样式： ```javascript $("#searchInput").suggest({ source: ....
1. 自定义脚本：开发者可以手动编写JavaScript代码，定义键盘布局、按键功能以及响应用户交互的事件处理函数。这种方法需要一定的JavaScript基础，但具有高度的灵活性和可定制性。 2. 使用现成的库：市面上存在许多...
首先，这个功能的需求是：根据用户在文本框中输入的文字，实时匹配并显示与之相关的数据，同时支持使用键盘方向键浏览选项，以及通过鼠标点击或键盘回车选择数据项并更新到文本框中。 在实现过程中，作者采用了以下...
2. 用户可以通过键盘的上下方向键浏览匹配项。 3. 通过鼠标点击或按下回车键，用户可以选择并显示选定的匹配数据在输入框中。 实现步骤如下： **HTML 结构分析：** HTML部分通常包括一个输入框和一个用于显示匹配...
- 用户可以通过键盘的方向键上/下来浏览匹配项，回车键选择某一项。 4. **兼容性和优化**： - 为了确保功能在多个浏览器中正常工作，需要进行跨浏览器的兼容性测试，尤其是针对IE系列的浏览器。 - 数据匹配和...
此外，将自动补全功能封装为JSP自定义标签可以使代码重用性更强，便于在多个页面中应用。 总结，HTML+JS实现自动补全功能主要涉及到HTML结构设计、JavaScript事件监听、数据匹配以及DOM操作。在实际应用中，还要...