jQuery 자동 완성 자체 확장 플러그인, 자동 완성 샘플 code_jquery
- WBOY원래의
- 2016-05-16 18:09:161033검색
코드 복사 코드는 다음과 같습니다.
그러나 브라우저와 호환됩니다. IE6 및 Firefox3.5와 호환되는 것으로 테스트되었습니다.
autocomplate.js를 먼저 살펴보세요:
;(function ($) {
var index = - 1;
var timeId;
var cssOptions = {
"border": "1px solid black",
"Background-color": "white",
"position" : "absolute" "/*,
"font": "normal 일반 라이터 14px 6px Times New Roman"*/
};
var defaults = {
width: "auto",
highlightColor: " #3399FE",
unhighlightColor: "#FFFFFF",
css: cssOptions,
dataType: "xml",
paramName: "word",
delay: 500,
최대: 20
};
var 키 = {
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(함수(이벤트) {
$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: 함수(입력, 설정) {
var inputOffset = input.offset()
var autoTip = $(" ").css(settings.css).hide()
.css("top", inputOffset.top input.height() 5 "px")
.css("왼쪽 ", inputOffset.left "px");
var space = $.browser.mozilla ? 2 : 6;//兼容浏览器
vartipWidth = (typeof settings.width === "string" && " auto") ? input.width() : settings.width;
autoTip.width(tipWidth space "px");
return autoTip;
},
select: 함수(대상, 인덱스, 설정, 플래그) {
var color = flag ? settings.unhighlightColor
target.children("div").eq(index).css("Background-color", color); 🎜>},
keyOperator: 함수(이벤트, autoTip, 설정) {
var evt = event || window.event;
var autoNodes = autoTip.children("div"); kc = evt.keyCode
var $this = this; ;= 키.Z || kc == 키.백스페이스 || kc == 키.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 () {
//如果已经存在高亮，去掉高亮改为白color
if (index != -1) {
autoTip.children("div").eq(index).css("Background-color", settings.unhighlightColor)
};
index = $(this).attr("id");
$(this).css("Background-color", settings.highlightColor)
//鼠标移take,取消高亮
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(); 지수 = -1;
}
}
});
}, settings.delay);
} else {
autoTip.hide();
지수 = -1;
}
} else if (kc == 키.UP || kc == 키.DOWN) {/*当用户按下上下键*/
if (kc == 키.UP) { //向上
if (index != -1) {
autoNodes.eq(index).css("Background-color", settings.unhighlightColor);
색인--;
} 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);
}
색인 ;
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("배경색", 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();
지수 = -1;
} else if (kc ==keys.ESC) {
autoTip.hide();
}
}
});
})(jQuery); cssOptions是自动提示选项的样式, 这里给式, 了一些默认的样式;
复代码
代码如下://将遍历的单词加入到创建的div中，然后把该div追加到auto中
divNode.html($ (this).text()).appendTo(autoTip);
//鼠标已进去，添加高亮
divNode.mousemove(function () {
//如果已经存在高亮，去掉高亮改为白color
if (index != -1) {
autoTip.children("div").eq(index).css("Background-color", settings.unhighlightColor)
};
index = $(this).attr("id");
$(this).css("Background-color", settings.highlightColor)
//鼠标移take,取消高亮
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(); 지수 = -1;
}
}
});
}, settings.delay);
} else {
autoTip.hide();
지수 = -1;
}
} else if (kc == 키.UP || kc == 키.DOWN) {/*当用户按下上下键*/
if (kc == 키.UP) { //向上
if (index != -1) {
autoNodes.eq(index).css("Background-color", settings.unhighlightColor);
색인--;
} 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);
}
색인 ;
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("배경색", 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();
지수 = -1;
} else if (kc ==keys.ESC) {
autoTip.hide();
}
}
});
})(jQuery); 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을 설정하고 위의 기본값에 나타나는 매개변수를 구성할 수 있는 함수입니다. 🎜 >autoTipTemplate은 입력 시 표시되는 프롬프트 상자 및 프롬프트 메뉴이며 jquery 객체를 반환합니다.
select는 프롬프트 메뉴의 강조 표시된 옵션인 선택 프롬프트 메뉴이며 대상은 물론 대상 객체입니다. 색인은 강조 표시될 항목입니다. 밝은 옵션의 색인은 기본값에 포함된
강조 색상 구성입니다. 기본 개체의 속성은 $.extend 메서드를 통해 설정 개체에 할당됩니다.
keyOperator는 텍스트 필드에 대한 키보드 작업이며 이에 따라 자동 완성됩니다. 아래를 참조하세요. html 코드를 보고 자동 완성 플러그인이 어떻게 호출되는지 확인하세요.
코드를 복사하세요. 코드는 다음과 같습니다. :
;input type="text" />
🎜>
이 코드를 보세요. AutocomplataWordServlet은 요청된 서블릿입니다. dataType은 Ajax 요청 서버가 반환하는 데이터 유형입니다. .
사용 방법은 비교적 간단합니다. 물론 나중에 다음과 같은 다른 구성을 추가할 수도 있습니다.
코드 조각
코드 복사
코드는 다음과 같습니다. :
$(":text").autocomplete("AutocomplataWordServlet", { width: "auto", highlightColor: "#3355FE", unhighlightColor: " #FFFFcc", css: {border: "2px solid red"},
dataType: "xml", paramName: "keyWord",
delay: 300
});
이것도 가능합니다.
AutocomplataWordServlet의 코드를 살펴보세요.
코드 복사 delay: 300
});
이것도 가능합니다.
AutocomplataWordServlet의 코드를 살펴보세요.
코드는 다음과 같습니다.
package com.hoo.servlet; import java.io.IOException; import javax.servlet. http.HttpServlet; import javax.servlet.http.HttpServletResponse; @SuppressWarnings("serial")
public class AutocomplataWordServlet { 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 내용을 보세요.
<%@ 페이지 언어="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" %> ;
< ;단어>
<단어>/단어>
anilazine ;/c:if> ;
appeared /c:if>
autocytolytic c:if>
apple :if>
boolean if>
break ;
< ;c:if test="${fn:startsWith('bird', word)}">
bird
< c:if test="${fn:startsWith('blur', word)}">
blur 🎜>
call
>
class
카드
;c:if test ="${fn:startsWith('dacnomania', word)}">
dacnomania
c:if test= "${fn:startsWith('document', word)}">
document
은 xml 형식의 문서입니다. jstl 표현식을 사용하고 startWith 함수와 일치시켜 전달하면 xml 콘텐츠에 나타나며 위의 contentType="text/ xml; charset=UTF- 8"? text/xml입니다! 일부 브라우저는 구성되지 않은 경우 이를 구문 분석할 수 없습니다.
저자: hoojo
블로그: http://blog.csdn.net/IBM_hoojo
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 내용을 보세요.
코드를 복사하세요 코드는 다음과 같습니다.
<%@ 페이지 언어="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" %> ;
< ;단어>
<단어>/단어>
< ;c:if test="${fn:startsWith('bird', word)}">
< c:if test="${fn:startsWith('blur', word)}">
>
은 xml 형식의 문서입니다. jstl 표현식을 사용하고 startWith 함수와 일치시켜 전달하면 xml 콘텐츠에 나타나며 위의 contentType="text/ xml; charset=UTF- 8"? text/xml입니다! 일부 브라우저는 구성되지 않은 경우 이를 구문 분석할 수 없습니다.
저자: hoojo
블로그: http://blog.csdn.net/IBM_hoojo
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.