jQuery autocomplate self-expanding plug-in, auto-complete sample code

Copy code The code is as follows:

But it is compatible with browsers. It has been tested to be compatible with IE6 and Firefox3.5
First look at 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() "] in the text box has been submitted!");
$("#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 <= keys.Z || kc == keys.BACKSPACE || kc == keys.DEL) {
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",//Default or automatically set width
highlightColor: "#3399FE",//Color when highlighting
unhighlightColor: "# FFFFFF",//Color when not highlighted
css: cssOptions, 
dataType: "xml",//Ajax request return data type
paramName: "word",//Ajax request parameter name , if you have set the id of the text field, then use this attribute 
delay: 500, //When the text field is continuously input, how often ajax requests the server 
}; 

keys is the value corresponding to the keyboard key;
autocomplete is the function called, in which you can set the URL of the ajax request and configure the parameters that appear in the defaults above. This method returns the value of the text field;
autoTipTemplate is the prompt box and prompt menu displayed when inputting, and returns a jquery object;
select is the selection prompt menu, which is the highlighted option of the prompt menu. The target is of course the target object, and the index is the one that will be highlighted. The index of the bright option, settings is the
highlight color configuration, which is included in the defaults. The properties of the defaults object are assigned to the settings object through the $.extend method;
keyOperator is a keyboard operation for the text field. This is the core function; operation prompts and automatic completion depend on it;
See below Look at the html code and see how the autocomplate plug-in is called:

Copy the code The code is as follows:

Ajax example, implementing Google Search completion function

Please enter:

Look at this code. AutocomplataWordServlet is the requested Servlet. dataType is the type of data returned by the ajax request server. width can set the width of the automatic prompt menu.
How about it? It’s relatively simple to use. Of course, you can also add other configurations later, such as:
Code snippet

Copy code The code is as follows:

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

This is also possible;
Look at the code of AutocomplataWordServlet:

Copy the code The code is as follows:

 
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); 
} 
} 

There is nothing to say, just get the keywords of the ajax request in the client text field, and then perform word filtering in the jsp page. However, you can also use regular
on the client or regular filtering on the server.
Look at the content of word.jsp below:

Copy the code The code is as follows:

 
 <%@ page language="java" contentType="text/xml; charset=UTF-8" %> 
<%@ taglib prefix="c" uri="http://java.sun. com/jsp/jstl/core" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
< ;words> 
 
abstruct 
 
anilazine 
 
appeared 
 
autocytolysis 
 
apple 
 
boolean 
 
break 
 
< ;c:if test="${fn:startsWith('bird', word)}"> 
bird 
 
< c:if test="${fn:startsWith('blur', word)}"> 
blur 
 
call 
 
class 
 
card 
 
dacnomania 
 
document

is a document in xml format. By using jstl expression and matching with startsWith function, if passed, it will appear in the xml content, and you can see the above contentType="text/xml; charset=UTF- 8"? It's text/xml! Please note this, some browsers will not be able to parse it if it is not configured.
Author: hoojo
blog: http://blog.csdn.net/IBM_hoojo

Related labels：

jquery automatic completion

source：php.cn

Previous article：Summary of some practical skills in javascript_javascript skills Next article：jquery select (list) operations (value/assignment)_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

jQuery autocomplate self-expanding plug-in, auto-complete sample code_jquery