文本框文本自动补全效果示例分享
代码如下:
/*文本自动补全 zhouxiang*/
(function ($) {
$.completion = function (setting) {
var opts = $.extend({}, $.completion.defaultsetting, setting);
//宽度
var completion_width = null;
//高度
var completion_height = null;
//数据源(ashx)访问路径
var completion_data_url = null;
//对象
var completion_obj = null;
var completion_obj_show = null;
//对象距离左边距
var completion_obj_marginleft = null;
//对象距离上边距
var completion_obj_margintop = null;
//对象高度
var completion_obj_height = null;
//分类
var completion_count = null;
//
var completion_type_obj = null;
//内容
var completion_value = null;
//类型
var completion_type = null;
//是否传入类型
var completion_bool = false;
//计数
var completion_n = 0;
//回车回调
var completion_clickcall = null;
//加载
function completion_loading() {
//初始化
init();
//绑定事件
completion_obj_addevent();
}
//初始化
function init() {
completion_obj_show = opts.completion_obj_show;
//获取对象
completion_obj = opts.completion_obj;
//获取对象宽度
completion_width = completion_obj.width();
//获取层显示高度
completion_height = opts.completion_height;
//获取访问url
completion_data_url = opts.completion_data_url;
//每次查询多少条记录
completion_count = opts.completion_count;
//获取对象高度
completion_obj_height = completion_obj.height();
//获取左边距
completion_obj_marginleft = completion_obj.offset().left;
//获取上边距
completion_obj_margintop = parseint(completion_obj.offset().top) + parseint(completion_obj_height);
completion_type_obj = opts.completion_type_obj;
completion_bool = opts.completion_bool;
completion_clickcall = opts.completion_clickcall;
}
//给对象添加事件
function completion_obj_addevent() {
completion_obj.keyup(function (event) {
switch (event.keycode) {
case 38:
break;
case 40:
break;
case 13:
completion_clickcall();
break;
default:
//按键事件 延迟操作
cimpletion_bind();
break;
}
});
completion_obj.keydown(function (event) {
switch (event.keycode) {
case 13:
break;
case 38:
if (completion_n == 0) {
completion_n = (completion_obj_show.find("li").length - 1);
} else if (completion_n != 0) {
completion_n = completion_n - 1;
}
//alert(completion_n);
completion_obj_show.find("li").find("a").removeclass("completion-guess-list-hover");
completion_obj_show.find("li").eq(completion_n).find("a").addclass("completion-guess-list-hover");
completion_obj.val(completion_obj_show.find("li").eq(completion_n).find("ul").text());
break;
case 40:
if (completion_n + 1 < completion_obj_show.find("li").length) {
completion_n = completion_n + 1;
} else if (completion_n + 1 == completion_obj_show.find("li").length) {
completion_n = 0;
}
completion_obj_show.find("li").find("a").removeclass("completion-guess-list-hover");
completion_obj.val(completion_obj_show.find("li").eq(completion_n).find("ul").text());
completion_obj_show.find("li").eq(completion_n).find("a").addclass("completion-guess-list-hover");
break;
default:
break;
}
});
}
//绑定方法
function cimpletion_bind() {
//是否开启类型判断
if (completion_bool) {
completion_type = completion_type_obj.val();
}
completion_value = completion_obj.val();
completion_value = completion_value.replace(" ", "");
//执行验证
completion_verification(completion_value);
if (completion_value.length > 1) {
//得到数据 构造html
completion_data_bind();
} else {
completion_obj_show.hide();
}
}
//验证
function completion_verification(obj) {
if (obj == "" || obj == null || obj == undefined) {
return false;
}
}
//执行ajax请求 得到数据
function completion_data_bind() {
$.ajax({
url: completion_data_url,
data: { completionvalue: completion_value, completioncount: completion_count, completiontype: completion_type },
type: "post",
datatype: "json",
success: function (obj) {
//构造html
completion_add_html(obj);
}
});
}
//选中
function completion_selected(obj) {
completion_obj.val(obj.find("ul").text());
completion_obj_show.hide();
}
//构造内容
function completion_add_html(obj) {
var data = obj.completion_data;
//执行验证
completion_verification(data);
var completion_li = "";
if (data != null && data != undefined) {
for (var i = 0; i < data.length; i++) {
//执行验证是否为空
var dr = data[i];
completion_verification(dr);
var completionname = dr.completion_name;
completionname = completionname.replace(completion_value.touppercase(), "<span class='c-hover'>" + completion_value.touppercase() + "</span>");
completion_li += "<li><a href='javascript：;'><span class='c-total'>约" + dr.completion_count + "条记录</span><ul>" + completionname + "</ul></a></li>";
}
if (completion_li != "") {
var completion_html = "<ul style='list-style-type:none;'>" + completion_li + "</ul>";
completion_obj_html(completion_html);
} else {
completion_obj_show.hide();
}
}
}
//mouse
function mousehover(obj) {
completion_obj_show.find("li").mouver(function () {
completion_obj_show.find("li").find("a").removeclass("completion-guess-list-hover");
completion_obj.val($(this).find("ul").text());
completion_n = completion_obj_show.find("li").index(this);
});
}
//绑定到控件
function completion_obj_html(html) {
completion_obj_show.show();
completion_obj_show.html("")
completion_obj_show.css({ "width": completion_width + 6, "height": completion_height, "border-width": "1px", "border-color": "#ccc", "border-top-width": "0px", "border-style": "solid", "position": "relative", "z-index": "100000" });
completion_obj_show.attr("class", "completion-guess-list");
completion_obj_show.html(html);
completion_n = -1;
completion_obj_show.find("li").unbind("click").click(function () {
completion_selected($(this));
});
mousehover($(this));
completion_obj_show.click(function (e) {
e.stoppropagation();
})
completion_obj.click(function (e) {
cimpletion_bind();
e.stoppropagation();
});
$(document).click(function () {
completion_obj_show.hide();
});
}
//加载
completion_loading();
};
//默认配置
$.completion.defaultsetting = {
completion_height: null,
completion_data_url: null,
completion_obj: null,
completion_obj_show: null,
completion_bool: false,
completion_count: 10,
completion_type_obj: null,
completion_clickcall: null
};
})(jquery);
. 代码如下:
body
{
margin: 0;
padding: 0;
}
.completion-guess-list ul, li
{
margin: 0;
padding: 0;
list-style:none;
}
.completion-guess-list
{
overflow: auto;
font-size: 12px;
line-height: 180%;
background: #fff;
}
.completion-guess-list a
{
color: #555;
text-decoration: none;
display: block;
padding: 1px 6px;
overflow: hidden;
white-space: nowrap;
font-family:verdana,arial;
}
.completion-guess-list a .c-total{float:right;color:green;}
.completion-guess-list a:hover,.completion-guess-list a.completion-guess-list-hover
{
background: #3399ff;
color: #fff;
}
.completion-guess-list a:hover span.c-total,.completion-guess-list a.completion-guess-list-hover span.c-total{color:#fff;}
.completion-guess-list .c-hover{font-weight:700;}
. 代码如下:
$.completion({ completion_obj: $("#input_html"), completion_data_url: "/completionhandler.ashx", completion_height: "auto", completion_obj_show: $("#show"), completion_bool: true, completion_type_obj: $("#type"), completion_clickcall: function () { alert(1); }, completion_length: 0 });