Baidu Google_javascript 기술과 유사한 퍼지 검색 드롭다운 목록을 시뮬레이션합니다.

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

// JavaScript Document
function onChangehoverLi(thisLi) {
$("#searchtext").val($(thisLi).html())
$("#suggest_ul").hide(0)
validateform2(); }

$(function(){
//로드 시 드롭다운 li 숨기기
$("#suggest_ul").hide(0);
}); >
/ /Ajax는 동적으로 키워드를 얻습니다

//텍스트 상자 입력 변경 듣기

function fuzzySearch(){

//Ajax 객체 함수 생성
function createLink(){
if(window.ActiveXObject){
var newRequest = new ActiveXObject("Microsoft.XMLHTTP")
}else{
var newRequest = new XMLHttpRequest(); >}
return newRequest;
}

//텍스트 상자가 비어 있으면 요청을 보내지 마세요.
if($("#searchtext").val().length ==0||$(" #searchtext").val().length>10){
$("#suggest_ul").hide(0)
return; //요청 보내기
http_request = createLink();//Ajax 객체 생성
if(http_request){
var sid = $("#searchtext").val()
var url = "contentSearchAction!getSynonyms.action" ;
var data = "keywords=" encodeURI(sid);
//alert(data)
http_request.open("post",url,true); 🎜>http_request.setRequestHeader("content -type","application/x-www-form-urlencoded")

//서버에서 반환된 결과를 처리하는 함수 지정
http_request.onreadystatechange = dealresult; //이 함수에는 대괄호가 필요하지 않습니다.
//요청 보내기
http_request.send(data)
}

//반환 결과 처리
function dealresult (){
if(http_request.readyState== 4){
//200이면 성공
if(http_request.status==200){
if(http_request.responseText==" 아니요"){
$("#suggest_ul") .hide(0);
return;

}
$("#suggest_ul").show(0);
var res = eval("(" http_request.responseText ") ");
varcontents=""
for(var i=0;ivar 키워드 = res[i].keywords;
contents=contents "

" 키워드

}
$("# presents_ul").html(contents)


}
}
}

}
//마우스
$(function(){

//키를 누른 후 300밀리초 후에 드롭다운 프롬프트 표시
$("#searchtext").keyup(function(){
setInterval(changehover,300);
functionchangehover() {
$("#suggest_ul li").hover(function(){ $(this).css("배경","#eee ");},function(){ $(this).css(" 배경","#fff");});
}
});

});


페이지:

코드 복사

코드는 다음과 같습니다. ;html xmlns="http://www.w3.org/1999/xhtml"> ;