바이두형 키워드 매칭 검색 example_jquery

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

关键词匹配搜索

搜索

<스크립트 유형 ="text/javascript">

//검색 입력 상자의 입력 프롬프트 js 클래스 구현
function oSearchSuggest(searchFuc){
var input = $('#gover_search_key');
var presentsWrap = $('#gov_search_suggest');
var key = "";
var init = function(){
input.bind('keyup',sendKeyWord); input.bind('blur',function(){setTimeout(hideSuggest,100);})
}
var hideSuggest = function(){
suggestWrap.hide()

//키워드를 기준으로 요청 보내기 및 배경 쿼리
var sendKeyWord = function(event){

//키보드 선택 드롭다운 항목
if(suggestWrap.css( 'display')= ='block'&&event.keyCode == 38||event.keyCode == 40){
var current = presentsWrap.find('li.hover')
if(event.keyCode) == 38){
if(current.length>0){
var prevLi = current.removeClass('hover').prev()
if(prevLi.length>0){
prevLi.addClass( 'hover');
input.val(prevLi.html());
}
}else{
var last = presentsWrap.find('li:last') ;
last .addClass('hover');
input.val(last.html())
}

}else if(event.keyCode == 40) 🎜>if(현재 .length>0){
var nextLi = current.removeClass('hover').next()
if(nextLi.length>0){
nextLi.addClass(' hover');
input.val(nextLi.html());
}
}else{
var first = presentsWrap.find('li:first'); addClass('hover' );
input.val(first.html());
}
}

//문자 입력
}else{
var ValText = $.trim( input.val());
if(valText ==''|valText==key){
return;
}
searchFuc(valText); key = valText;
}

}
//요청 반환 후 데이터 표시 수행
this.dataDisplay = function(data){
if(data.length<= 0){
presentsWrap.hide();
return;
}

//검색창 드롭다운 제안 표시줄에 항목을 추가하고
var li; 🎜>var tmpFrag = document.createDocumentFragment ();
suggestWrap.find('ul').html('')
for(var i=0; ili = document.createElement(' LI');
li.innerHTML = data[i];
tmpFrag.appendChild(li);
}
suggestWrap.find('ul'). Append(tmpFrag);
presentsWrap.show();

//드롭다운 옵션에 대한 마우스 이벤트 바인딩
suggestWrap.find('li').hover(function(){
suggestWrap.find('li') .removeClass('hover');
$(this).addClass('hover')

},function(){
$(this ).removeClass('hover');
}).bind('click',function(){
$(this).find("span").remove();
input.val (this.innerHTML);
presentsWrap.hide();
});
}
init()
}; 프롬프트, 쿼리 작업 수행 시 매개변수가 필요함 호출된 함수 이름
var searchSuggest = new oSearchSuggest(sendKeyWordToBack)

//Ajax 쿼리 요청을 백그라운드로 보내고 반환하는 모의 함수입니다. 쿼리 결과 데이터는 프런트 데스크 JS로 전달되고 프런트 엔드 JS는 해당 데이터를 표시합니다. 이 함수는 쿼리 요청을 구현하기 위해 프로그래머에 의해 수정됩니다
//매개 변수는 문자열이며 검색 입력 상자의 현재 내용입니다
function sendKeyWordToBack(keyword){
/* var obj = {
"keyword" : 키워드
};
$.ajax({
type: "POST",
url: "${ctx}/front/suqiu2/search/prompt- 키워드.액션 ",
async:false,
데이터: obj,
dataType: "json",
성공: function(data){
//var json = eval("( " 데이터 " )");
var key=data.split(",");
var aData = [];
for(var i=0;i //다음은 입력에 따라 검색 결과를 반환하는 시뮬레이션 효과 코드입니다.
if(key[i]!=""){
aData.push( key[i]);
}
}
//검색 입력 상자를 구현하는 입력 프롬프트 js 클래스에 반환된 데이터를 전달합니다.
searchSuggest.dataDisplay(aData)
}
}); */

//다음은 입력에 따라 실제 데이터를 반환하는 시뮬레이션 효과 코드입니다.
var aData = <🎜; >aData.push(' 약 100' 키워드 '데이터 1 반환')
aData.push(' 약 200' 키워드 '반환 데이터 2')
aData.push('약 100' 키워드 '반환 데이터 3'); >aData.push('약 50,000' 키워드 '데이터 4 반환')
aData.push(' About 1044' 키워드 ' 2012는 true')
aData.push('about 100' 키워드 '2012는 false'); >aData.push( 'about 100' 키워드 '2012년은 사실입니다')
aData.push('about 100 ' 키워드 '2012는 false')
// 검색 입력 상자의 입력 프롬프트를 구현하는 js 클래스에 반환된 데이터를 전달합니다.
searchSuggest.dataDisplay(aData); >}