1. jquery-latest.js, JSuggest.js 및 JSuggest.css를 다운로드하세요.
JSuggest.js의 소스코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
/**
*
* 설명: JSuggest 드롭다운 프롬프트 상자
*/
함수 JSuggest(){
// DIV 드롭다운 상자
this.div = null;
//DIV 아래의 ul
this.ul = null;
//텍스트 입력 상자
this.input = null;
// 현재 DIV에 의해 선택된 LI 객체
this.current_li = null;
/**
* 드롭다운 프롬프트 상자 숨기기
*/
this.hide = 함수(){
this.div.style.visibility = "숨김";
}
/**
* 드롭다운 프롬프트 상자 표시
*/
this.show = 함수(){
this.div.style.visibility = "표시됨";
}
/**
* 드롭다운 프롬프트 상자 상태
*/
this.status = 함수(){
if (this.div.style.visibility == "표시됨"){
사실을 반환;
}
거짓을 반환;
}
/**
* 현재 DIV에서 선택한 LI를 설정합니다.
*/
this.setCurrent_li = 함수(li, obj){
var co = obj.current_li;
if (co != null){
co.className = "";
}
li.className = "li_index";
obj.current_li = 리;
}
/**
* 제안 초기화
*
* input_id: 입력창의 ID
* defHeight: 드롭다운 프롬프트 상자의 높이(제공할 수도 없음)
*/
this.init = 함수(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "끄기";
var left = this.input.offsetLeft;
var top = this.input.offsetTop;
var 너비 = this.input.offsetWidth;
var 높이 = this.input.offsetHeight;
var p=this.input.offsetParent;
동안(p!= null){
왼쪽+=p.offsetLeft;
top+=p.offsetTop;
p=p.offsetParent;
}
상단+= 높이;
if(defHeight==null || defHeight==0){
높이 = 150;
}또 다른{
높이 = defHeight;
}
this.input.value = "";
var obj = 이것;
this.input.onkeydown = 함수(evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = 너비 + "px";
this.div.style.height = 높이 + "px";
this.div.style.left = 왼쪽 + "px";
this.div.style.top = 상단 + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(this.div);
}
/**
* DIV 아래 UL의 모든 LI를 제거합니다.
*/
this.remove = 함수(){
this.current_li = null;
while(this.removeLI());
}
/**
* DIV 아래의 UL에서 LI를 제거합니다.
*/
this.removeLI = 함수(){
var node = this.ul.childNodes;
for(노드의 var n){
if (노드[n] != null && node[n].nodeName == "LI"){
// 경고(노드[n].innerHTML);
this.ul.removeChild(노드[n]);
사실을 반환;
}
}
거짓을 반환;
}
/**
* DIV에 LI 생성
*/
this.create = 함수(항목){
this.remove();
var li_item = items.split(",");
for(li_item의 var i){
//alert(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = 이것;
li.onmousedown = 함수(){
obj.onmousedown(this, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.show();
}
/**
* 텍스트박스 누르기 이벤트
*/
this.onkeydown = 함수(evt, obj){
if (!obj.status()){
거짓을 반환;
}
if (!evt && window.event)
{
evt = window.event;
}
var 키 = evt.keyCode;
//var KEYUP = 38;
//var KEYDOWN = 40;
//var KEYENTER = 13;
var ob = obj;
if (키 == 38){
obj.upKeySelected();
}else if (키 == 40){
obj.downKeySelected();
}else if (키 == 13 || 키 == 27){
obj.hide();
}
}
this.getCurrentLiIndex = 함수(){
if(this.current_li == null){
-1을 반환합니다.
}
var node = this.ul.childNodes;
for(노드의 var n){
if (노드[n].nodeName == "LI"){
if(노드[n] == this.current_li){
n을 반환;
}
}
}
}
this.getLi = 함수(색인){
var node = this.ul.childNodes;
for(노드의 var n){
if (node[n].nodeName == "LI" && n == 인덱스){
this.setCurrent_li(노드[n], this);
반환 노드[n];
}
}
}
this.upKeySelected = 함수(){
var num = this.getCurrentLiIndex();
if (숫자 != -1 && 숫자 > 0){
숫자--;
var 노드 = this.getLi(num);
this.setCurrent_li(노드, this);
this.input.value = node.innerHTML;
}
}
this.downKeySelected = 함수(obj){
var num = this.getCurrentLiIndex();
if (숫자 == -1){
숫자 = 0;
}또 다른 {
숫자++;
if (num >= this.ul.childNodes.length)는 false를 반환합니다.
}
var 노드 = this.getLi(num);
this.setCurrent_li(노드, this);
this.input.value = node.innerHTML;
}
/**
* DIV 마우스 누르기 이벤트
*/
this.onmousedown = 함수(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.hide();
}
/**
* DIV 마우스 움직임 이벤트
*/
this.onmouseover = 함수(){
if (this.className != "li_index"){
this.className = "li_check";
}
}
/**
* DIV 마우스 아웃 이벤트
*/
this.onmouseout = 함수(){
if (this.className == "li_check"){
this.className = "";
}
}
}
var jsuggest = new JSuggest();
2.jsp 페이지
다음과 같이 코드 코드를 복사합니다.
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<스크립트 유형="텍스트/자바스크립트">
j(문서).ready(함수(){
//JSUGGEST 초기화
jsuggest.init("텍스트");
//또는 다음 방법을 사용하여 드롭다운 상자의 높이를 설정합니다.
//jsuggest.init("텍스트",200);
})
함수 go(이벤트, 값){
이벤트= 이벤트 ? 이벤트 : (window.event ? window.event : 인수[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url은 특정 작업 또는 jsp 주소 등이며 반환 값은 쉼표로 구분된 문자열입니다.
goSuggestInput(이벤트, URL, 값);
}
함수 goSuggestInput(evnet,url,value){
if (값 == ""){
//입력 상자가 비어 있으면 드롭다운 상자를 숨깁니다.
jsuggest.hide();
거짓을 반환;
}
// evt가 유효한 이벤트인지 확인하세요.
if (!evnet && window.event)
{
evnet = window.event;
}
var 키 = evnet.keyCode;
if (키 == 38 || 키 == 40 || 키 == 13 || 키 == 27){
거짓을 반환;
}
j.아약스({
유형: "게시물",
URL:URL,
데이터 유형: "텍스트",
캐시: "거짓",
beforeSend: 함수(XMLHttpRequest){
},
성공: 함수(데이터, 텍스트상태){
//드롭다운 상자에 데이터 추가
jsuggest.create(데이터);
},
완료: 함수(XMLHttpRequest, textStatus){
},
오류: 함수(){
Alert("죄송합니다. 서버가 혼잡합니다!");
}
});
}
</script>