jquery 시뮬레이션 검색 상자가 자동으로 검색 프롬프트 기능을 완성합니다(개선됨)_jquery

autopoint.js 코드:

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

/*
* @date: 2010-5-22 21:42:15
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:类似GOOGLE搜索框提示功能
*/
(function($) {
$.fn.autopoint = function (options) {
defaults = {
url:options.url,
keyLeft : 37,//向左方向键
keyUp : 38,//向上方向键
keyRight : 39,//向右方向键
keyDown : 40,//向下方向键
keyEnter : 13,//回车键
listHoverCSS : 'jhover',//提示框列表鼠标悬浮的样式
tpl : '

{word}

约{view}条记录

',
topoffset:options.topoffset||5
};
var options = $.extend(defaults, options);
var dropDiv = $('

').addClass('dropDiv').appendTo('body');
var isOver = false;
dropDiv.hover(function(){
isOver = true;
}, 함수 (){
isOver = false;
});
return this.each(function(){
var pa = $(this);
$(this).bind(' keydown', function(event){
if (dropDiv.css('display') != 'none') {//키보드 이벤트는 프롬프트 레이어가 표시될 때만 처리됩니다.
var currentList = dropDiv.find ( '.' options.listHoverCSS);
if (event.keyCode == options.keyDown) {//아래쪽 화살표 키를 누른 경우
if (currentList.length == 0) {
/ /프롬프트 목록에서 선택된 항목이 없으면 목록에서 첫 번째 항목을 선택하세요.
$(this).val(getPointWord(dropDiv.find('.list:first')
.mouseover())) ;
} else if (currentList.next().length == 0) {
//마지막 항목이 선택되어 있으면 선택을 취소하세요. 이는 입력 상자가 선택되었음을 의미합니다.
unHoverAll(); 🎜>} else {
unHoverAll();
//원래 선택한 열의 다음 열을 선택합니다
if (currentList.next().length != 0)
$(this). val (getPointWord(currentList.next()
.mouseover()));
}
return false
} else if (event.keyCode == options.keyUp) {//눌린 경우 위쪽 화살표 키입니다
if (currentList.length == 0) {
$(this).val(getPointWord(dropDiv.find('.list:last')
.mouseover()) );
} else if (currentList.prev().length == 0) {
unHoverAll()
} else {
unHoverAll()
if (currentList.prev() ). 길이 != 0)
$(this).val(getPointWord(currentList.prev()
.mouseover()))
}
return false; (event .keyCode == options.keyEnter) dropDiv.empty().hide();
}
//키를 누르기 전에 입력 상자 값을 기록하여 키를 눌렀을 때 값이 변경되었는지 쉽게 확인할 수 있습니다. 팝업
$(this).attr('alt', $(this).val())
}).bind('keyup', function(event){
//If the 튀어나온 키는 위쪽 또는 아래쪽 화살표 키입니다. return
if(event.keyCode == options.keyDown||event.keyCode == options.keyUp) return
if($(this).val() == ' '){
dropDiv.empty().hide();
return;
}
//입력 상자 값이 변경되지 않거나 비어 있으면
을 반환합니다($ (this ).val() == $(this).attr('alt'))
return;
getData(pa, $(this).val())
}).bind (' Blur', function(){
if(isOver&&dropDiv.find('.' options.listHoverCSS)!=0) return;
//텍스트 입력 상자가 포커스를 잃으면 지워지고 프롬프트 레이어가 숨겨집니다
dropDiv.empty().hide();
})
/**Ajax 반환 성공을 처리하는 방법**/
handleResponse = function(parent, json) {
var isEmpty = true;
for( var o in json){
if(o == 'data') isEmpty = false;
}
if(isEmpty) {
showError(" 반환된 데이터 형식이 잘못되었습니다. 요청 URL이 올바른지 확인하세요!");
return;
}
if(json['data'].length == 0) {
/ /반환 데이터가 비어 있습니다
return
}
refreshDropDiv(parent, json)
dropDiv.show()
/**Ajax 실패를 처리하는 방법**/
handleError = function(error) {
//showError ("URL 오류 또는 시간 초과로 인해 요청이 실패했습니다!")
}
showError = function(error){
alert(error );
}
/**dom을 생성하는 데 사용되는 문자열을 생성하기 위해 ajax를 통해 json 형식 데이터를 반환합니다**/
render = function(parent, json) {
var res = json['data'] || varappendStr = ''
//템플릿 문자를 json 객체의 콘텐츠로 대체 콘텐츠 일치 /{([a-z] )}/ig 예: {word}, ​​​​{view}
( var i = 0; i appendStr = options.tpl.replace(/{([a-z] )}/ig, function(m, n) {
return res[i][n];
});
}
jebind(parent,appendStr)
/**새 DOM 객체를 프롬프트 상자에 삽입하고 마우스오버 이벤트 리스너를 다시 바인딩합니다**/
jebind = 함수 (부모, a) {
dropDiv.append(a);
dropDiv.find ('.list').each(function() {
$(this).unbind('mouseover'). mouseover(function() {
unHoverAll();
$(this).addClass (options.listHoverCSS);
}).unbind('click').click(function(){
parent.val(getPointWord($(this))));
dropDiv.empty().
parent.focus()
}); >}
/**프롬프트 상자의 모든 열에서 호버 스타일을 제거합니다**/
unHoverAll = function() {
dropDiv.find('.list').each(function() {
$(this).removeClass (options.listHoverCSS);
})
}
/**프롬프트 상자에서 현재 선택된 프롬프트 키워드를 가져옵니다**/
getPointWord = function(p) {
return p.find('div:first' ).text()
}
/**프롬프트 상자를 새로 고치고 스타일을 설정하세요**/
RefreshDropDiv = function(parent, json) {
var left = parent.offset().left
var; height = parent.height();
var top = parent.offset().top options.topoffset height;
var width = options.width() 'px'; .empty();
dropDiv.css( {
'border' : '1px solid #FE00DF',
'left' : 왼쪽,
'top' : 상단,
'너비 ' : width
});
render(parent, json);
/ /Ajax가 반환되기 전에 입력 상자가 포커스를 잃어 프롬프트 상자가 사라지지 않도록 방지
parent.focus() ;
}
/**ajax*를 통해 서버에서 데이터 요청*/
getData = function(parent, word) {
$.ajax( {
type : 'GET',
data : "word=" word,
url : options.url,
dataType : 'json',
timeout : 1000,
success : function(json){handleResponse(parent, json);},
오류 : handlerError
})
}
}; 🎜>
코드는 다음과 같습니다:

🎜>호출 방법 :




코드 복사


코드는 다음과 같습니다.






　 🎜>서블릿 주요 부분:

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

응답 .setContentType("text/html");
response.setHeader("Cache-Control", "no-cache")
response.setCharacterEncoding("UTF-8"); request.getParameter("word");
if(Utils.isBlank(word)) return;
JSONObject json = new JSONObject();
JSONArray array = new JSONArray(); String, Object> map1 = new HashMap ;()
map1.put("word", word "a1")
map1.put("view", 10); Map map2 = new HashMap()
map2.put("word", word "a2")
map2.put("view", 15); 🎜>Map map3 = new HashMap()
map3.put("word", word "a3")
map3.put("view", 2) ;
array.add(JSONObject.fromObject( map1));

array.add(JSONObject.fromObject(map2))
array.add(JSONObject.fromObject(map3)); .put("data", array);
PrintWriter out = response.getWriter();

out.print(json.toString()) 여기서 JSONObject 및 JSONArray 클래스는 json- lib.jar에서 가져오며 테스트 편의를 위해 데이터를 직접 반환합니다. 실제 애플리케이션에서는 으로 대체하여 데이터 소스에서 데이터를 검색할 수 있습니다.