模擬一個類似百度google的模糊搜尋下拉清單_javascript技巧

複製程式碼 程式碼如下:

// JavaScript Document
function onChangeh> >$("#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=="no"){
$("#suggest_ul") .hide(0);
return;

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

" keywords "

";

}
$("#suggest_ul") .html(contents);


}
}
}

}
//老鼠
$(function(){

//按下按鍵後300毫秒顯示下拉提示
$("#searchtext").keyup(function(){
setInterval(changehover,300);
function changehover(){
$("#suggest_ul li").hover(function(){ $(this).css("background","#eee");},function(){ $(this).css("background", "#fff");});
}
});

});

頁：

頁：頁：

複製代碼


代碼如下:

使用的過程中發現一種情況不會去搜索，ios系統自帶的輸入法輸入中文的時候既不是onkeyup 也不是onchange事件，因為是用戶剛開始的按鈕是按的虛擬鍵盤，

可以使用onkeyup 事件，當出現中文的時候點擊中文將輸入框裡面的值改變成了中文，onchange不能捕獲腳本改動的輸入框的值。

最後的解決方法是 用oninput事件，這個是最新的html5 中的事件非常好用，只是有些低版的瀏覽器不能相容比較麻煩。