jquery_jquery를 기반으로 구현된 Baidu 검색과 유사한 입력 상자 자동 완성 기능

더 이상 고민하지 않고 직관적으로 살펴보겠습니다.

이 기능을 구현하려면 서버의 협조가 필요합니다. 클라이언트는 스크립트를 통해 서버에서 얻은 데이터를 표시합니다.

먼저 클라이언트 HTML을 살펴보세요.

코드 복사 코드는 다음과 같습니다.

 
nbsp;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
 
 
 

')
.hide()
.insertAfter('#submit')
//드롭다운 목록 내용을 지우고 드롭다운 목록 영역 숨기기
varclear = function(){
$autocomplete.empty().hide();
};
//이벤트 등록, 드롭다운 목록을 지우고 입력 상자가 포커스를 잃으면 숨김
$ searchInput.blur(function(){
setTimeout(clear,500);
})
//드롭다운 목록 항목이 강조 표시된 항목의 인덱스입니다. 표시된 경우 마우스나 키보드의 위쪽 및 아래쪽 키를 움직이면 Baidu 검색
var selectedItem = null
//The ID of timeout
var timeoutid = null; >//드롭다운 항목의 강조 배경 설정
var setSelectedItem = function(item ){
//인덱스 변수 업데이트
selectedItem = item
//위쪽 키와 아래쪽 키를 누릅니다. 0보다 작으면 최대값으로 설정되고, 최대값보다 크면 0으로 설정됩니다.
if (selectedItem selectedItem = $autocomplete.find('li').length - 1;
}
else if(selectedItem > $autocomplete.find('li').length -1 ) {
selectedItem = 0;
}
//먼저 다른 목록 항목의 강조 배경을 제거한 다음 현재 인덱스의 배경을 강조 표시합니다
$autocomplete.find('li' ).removeClass('highlight')
.eq(selectedItem).addClass('highlight');
};
var ajax_request = function(){
//ajax 서버 통신
$.ajax({
'url':'/test/index.jsp', //서버 주소
'data':{'search-text':$searchInput.val()}, / /Parameters
'dataType ':'json', //반환 데이터 유형
'type':'POST', //요청 유형
'success':function(data){
if( data.length) {
//데이터를 탐색하여 자동 완성 영역에 추가
$.each(data, function(index,term) {
//li 태그를 생성하여 드롭다운 목록에 추가
$('

').text(term).appendTo($autocomplete)
.addClass('clickable')
.hover(function(){
/ / 드롭다운 목록의 각 항목에 대한 이벤트, 해당 항목으로 마우스를 이동하는 작업
$(this).siblings().removeClass('highlight')
$(this).addClass('highlight) ');
selectedItem = index;
},function(){
//드롭다운 목록의 각 항목에 대한 이벤트, 마우스 이탈 동작
$(this).removeClass ('highlight'); / /마우스가 떠나면 인덱스가 -1로 설정되어 표시로 사용됩니다.
selectedItem = -1
})
.click(function (){
//드롭다운 목록에서 이 항목을 마우스로 클릭합니다. 그렇다면 이 항목의 값을 입력 상자에 추가하세요.
$searchInput.val(term)//Clear and 드롭다운 목록 숨기기
$autocomplete.empty().hide();
})
});//이벤트 등록 완료
//드롭다운 위치 설정 목록을 확인한 다음 드롭다운 목록을 표시합니다
var ypos = $searchInput.position().top
var xpos = $searchInput.position().left
$autocomplete.css('width ',$searchInput.css('width'));
$autocomplete.css({'position':'relative' ,'left':xpos "px",'top':ypos "px"});
setSelectedItem(0);//드롭다운 목록 표시
$autocomplete.show()
}
}
}; //입력 상자에 대한 이벤트 등록
$searchInput
.keyup(function(event) {
//Alphanumeric , backspace, space
if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) {
//먼저 드롭다운 목록의 정보를 삭제하세요
$ autocomplete.empty().hide()
clearTimeout(timeoutid);
timeoutid = setTimeout(ajax_request,100);
}
else if(event.keyCode == 38){
//Up
//selectedItem = -1은 마우스가 떠났다는 의미입니다.
if(selectedItem == -1){
setSelectedItem($autocomplete.find('li').length-1)
}
else {
//색인 빼기 1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
}
else if(event.keyCode == 40) {
//Down
/ /selectedItem = -1은 마우스가 떠났다는 것을 의미합니다.
if(selectedItem == -1){
setSelectedItem(0)
}
else {
//인덱스를 1만큼 늘립니다.
setSelectedItem(selectedItem 1);
}
event.preventDefault();
}
})
.keypress(function( event){
//키 입력
if(event.keyCode == 13) {
//목록이 비어 있거나 마우스가 떠났기 때문에 현재 인덱스 값이 없습니다.
if($autocomplete.find(' li').length == 0 || selectedItem == -1) {
return;
}
$searchInput.val($autocomplete.find('li').eq(selectedItem).text ()); $autocomplete.empty().hide();
event.preventDefault();
}
})
.keydown(function(event){
//esc 키
if(event.keyCode == 27 ) {
$autocomplete.empty().hide();
event.preventDefault();
}
}); 창 크기 변경 이벤트 및 드롭다운 목록 위치 변경
$(window).resize(function() {
var ypos = $searchInput.position().top;
var xpos = $searchInput. position().left;
$autocomplete.css('width',$searchInput.css('width'))
$autocomplete.css({'position':'relative ','left': xpos "px",'top':ypos "px"})

;

키워드를 입력하세요

> ;
본문>

서버측 코드의 경우 여기에서 JSP를 선택하거나 PHP를 사용할 수 있습니다. 서버측은 중요하지 않습니다. 핵심은 데이터를 전송하는 것입니다.

코드 복사 코드는 다음과 같습니다.

String []words = {"amani","abc","apple","abstract" ,"an","bike","byebye",
"beat","be","bing","come","cup","class","calendar","china"}
if (request.getParameter("search-text") != null) {
String key = request.getParameter("search-text")
if(key.length() != 0) {
String json="[";
for(int i = 0; i if(words[i].startsWith(key)){
json = " "" 단어[i] """ ",";
}
}
json = json.substring(0,json.length()-1>0?json.length() -1: 1);
json = "]";
System.out.println("json:" json)
out.println(json); 🎜>% >


전체 프로세스의 개념은 실제로 매우 명확합니다. 먼저 입력 상자에 keyup 이벤트를 등록한 다음 이벤트에서 ajax를 통해 json 개체를 가져옵니다. 데이터를 획득한 후, 데이터의 각 항목에 대해 li 태그를 생성하고 태그에 클릭 이벤트를 등록하면 각 항목을 클릭할 때 해당 이벤트에 응답할 수 있습니다. 키보드 탐색의 핵심은 현재 강조 표시된 색인 값을 기록하고 색인 값에 따라 배경 강조 표시를 조정하는 것입니다. 드롭다운 목록의 위치는 입력 상자의 위치에 따라 설정되어야 하며, 브라우저 크기가 변경되면 언제든지 드롭다운 목록의 위치를 ​​조정할 수 있습니다.
JQuery는 웹 프런트엔드를 위한 강력한 도구입니다. 기회가 된다면 꼭 살펴보세요.