jQuery autocomplate 自扩展插件、自动完成示例代码

首頁

web前端

js教程

jQuery autocomplate 自扩展插件、自动完成示例代码_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:09 PM

jquery自動完成

复制代码代码如下:

不过做了浏览器方面的兼容，经测试兼容IE6+、Firefox3.5+
首先看看autocomplate.js:
;(function ($) {
var index = -1;
var timeId;
var cssOptions = {
"border": "1px solid black",
"background-color": "white",
"position": "absolute"/*,
"font": "normal normal lighter 14px 6px Times New Roman"*/
};
var defaults = {
width: "auto",
highlightColor: "#3399FE",
unhighlightColor: "#FFFFFF",
css: cssOptions,
dataType: "xml",
paramName: "word",
delay: 500,
max: 20
};
var keys = {
UP: 38,
DOWN: 40,
DEL: 46,
TAB: 9,
ENTER: 13,
ESC: 27,
/*COMMA: 188,*/
PAGEUP: 33,
PAGEDOWN: 34,
BACKSPACE: 8,
A: 65,
Z: 90
};
$.fn.extend({
autocomplete: function (sUrl, settings) {
sUrl = (typeof sUrl === "string") ? sUrl : "";
var param = !this.attr("id") ? defaults.paramName : this.attr("id");
settings = $.extend({}, defaults, {url: sUrl, paramName: param}, settings);
var autoTip = this.autoTipTemplate(this, settings);
$("body").append(autoTip);
var $this = this;
this.keyup(function (event) {
$this.keyOperator(event, autoTip, settings);
});
/*$("input[type=button]").click(function () {
$("#result").text("文本框中的【" + search.val() + "】被提交了！");
$("#auto").hide();
index = - 1;
});*/
return this.each(function () {
$this.val();
});
},
autoTipTemplate: function (input, settings) {
var inputOffset = input.offset();
var autoTip = $("

").css(settings.css).hide()
.css("top", inputOffset.top + input.height() + 5 + "px")
.css("left", inputOffset.left + "px");
var space = $.browser.mozilla ? 2 : 6;//兼容浏览器
var tipWidth = (typeof settings.width === "string" && "auto") ? input.width() : settings.width;
autoTip.width(tipWidth + space + "px");
return autoTip;
},
select: function (target, index, settings, flag) {
var color = flag ? settings.highlightColor : settings.unhighlightColor;
target.children("div").eq(index).css("background-color", color);
},
keyOperator: function (event, autoTip, settings) {
var evt = event || window.event;
var autoNodes = autoTip.children("div");
var kc = evt.keyCode;
var $this = this;
/* 当用户按下字母或是delete 或是退格键*/
if (kc >= keys.A && kc var wordText = this.val();
if (wordText.length != 0) {
var param = {};
param[settings.paramName] = wordText;
clearTimeout(timeId);
timeId = setTimeout(function () {
$.post(settings.url, param, function (data) {
var wordObj = $(data);
if (settings.dataType == "xml") {
var wordNodes = wordObj.find("word");
autoTip.html("");
wordNodes.each(function (i) {
var divNode = $("

").attr("id", i);
//将遍历的单词加入到创建的div中，然后把该div追加到auto中
divNode.html($(this).text()).appendTo(autoTip);
//鼠标已进去，添加高亮
divNode.mousemove(function () {
//如果已经存在高亮，去掉高亮改为白色
if (index != -1) {
autoTip.children("div").eq(index).css("background-color", settings.unhighlightColor);
}
index = $(this).attr("id");
$(this).css("background-color", settings.highlightColor);
});
//鼠标移出,取消高亮
divNode.mouseout(function () {
$(this).css("background-color", settings.unhighlightColor);
});
//点击高亮内容
divNode.click(function () {
$this.val($(this).text());
index = -1;
autoTip.hide();
});
});
if (wordNodes.length > 0) {
autoTip.show();
} else {
autoTip.hide();
index = -1;
}
}
});
}, settings.delay);
} else {
autoTip.hide();
index = -1;
}
} else if (kc == keys.UP || kc == keys.DOWN) {/*当用户按下上下键*/
if (kc == keys.UP) {//向上
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
index--;
} else {
index = autoNodes.length - 1;
}
if (index == -1) {
index = autoNodes.length - 1;
}
autoNodes.eq(index).css("background-color", settings.highlightColor);
} else {//向下
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
index++;
if (index == autoNodes.length) {
index = 0;
}
autoNodes.eq(index).css("background-color", settings.highlightColor);
}
} else if (kc == keys.PAGEUP || kc == keys.PAGEDOWN) {
event.preventDefault();
if (kc == keys.PAGEUP) {
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
if (autoNodes.length > 0) {
index = 0;
autoNodes.eq(0).css("background-color", settings.highlightColor);
}
} else {
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
index = autoNodes.length - 1;
autoNodes.eq(index).css("background-color", settings.highlightColor);
}
} else if (kc == keys.ENTER) {
//回车键
//有高亮内容就补全信息
if (index != -1) {
$this.val(autoNodes.eq(index).text());
} else {//没有就隐藏
$("body").append($("

").text("文本框中的【" + $this.val() + "】被提交了！"));
$this.get(0).blur();
}
autoTip.hide();
index = -1;
} else if (kc == keys.ESC) {
autoTip.hide();
}
}
});
})(jQuery);

现在来分析上面的autocomplate插件的一些常用选项：
index就是选择提示选项高亮的索引；
timeId是当用户在文本域输入时，利用setTimeout进行ajax请求服务器获得数据的而返回的时间；
cssOptions是自动提示选项的样式，这里给出了一些默认的样式；

复制代码代码如下:

 
var defaults = { 
width: "auto",//默认或自动设置宽度 
highlightColor: "#3399FE",//高亮时的颜色 
unhighlightColor: "#FFFFFF",//非高亮时的颜色 
css: cssOptions, 
dataType: "xml",//ajax请求返回数据类型 
paramName: "word",//ajax请求的参数名称，如果你有设置文本域的id，那么就使用这个属性 
delay: 500,//当文本域在不停的输入时，ajax多久请求一次服务器 
}; 

keys就是键盘键对应的值；
autocomplete就是调用的函数，可以在里面设置ajax请求的url，以及配置上面defaults中出现的参数，这个方法返回的是文本域的值；
autoTipTemplate就是输入时显示的提示框、提示菜单，返回的是一个jquery对象；
select是选择提示菜单也就是下来提示菜单的高亮选项，target当然是目标对象了，index是即将被高亮的选项的索引，settings就是
高亮的颜色配置，这个在默认defaults中就有的。是通过$.extend方法将defaults对象的属性赋值给settings对象的；
keyOperator是针对文本域的键盘操作，这个是核心函数；操作提示、自动补全就靠它了；
下面看看html代码，看看是如何调用autocomplate插件的：

复制代码代码如下:

Ajax示例，实现Google搜索补全功能

请输入：

看看这段代码AutocomplataWordServlet是请求的Servlet，dataType是ajax请求服务器端的返回数据的类型，width可以设置自动提示菜单的宽度。
怎么样，用法比较简单吧。当然后面你还可以加其他的配置，如：
代码片段

复制代码代码如下:

 
$(":text").autocomplete("AutocomplataWordServlet", { 
width: "auto", 
highlightColor: "#3355FE", 
unhighlightColor: "#FFFFcc", 
css: {border: "2px solid red"}, 
dataType: "xml", 
paramName: "keyWord", 
delay: 300 
}); 

这样也是可以的；
看看AutocomplataWordServlet的代码：

复制代码代码如下:

 
package com.hoo.servlet; 
import java.io.IOException; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
@SuppressWarnings("serial") 
public class AutocomplataWordServlet extends HttpServlet { 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
String word = request.getParameter("word"); 
request.setAttribute("word", word); 
//System.out.println(word); 
request.getRequestDispatcher("word.jsp").forward(request, response); 
} 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
doGet(request, response); 
} 
} 

没什么可说的，就是获取客户端文本域的ajax请求的关键字，然后在jsp页面中进行单词过滤。不过你也可以在客户端用正则
或是在服务器端用正则过滤都是可以的。
下面看看word.jsp的内容：

复制代码代码如下:

 
abstruct 
 
anilazine 
 
appeared 
 
autocytolysis 
 
apple 
 
boolean 
 
break 
 
bird 
 
blur 
 
call 
 
class 
 
card 
 
dacnomania 
 
document

就是一个xml格式的文档，通过使用jstl表达式，用startsWith函数匹配，如果通过就显得在xml内容中，还有看到上面的contentType="text/xml; charset=UTF-8"了没有，是text/xml哦！这点要注意，如果不设置有的浏览器就不能解析了。
作者：hoojo
blog：http://blog.csdn.net/IBM_hoojo

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn