亚洲精品在线三区,午夜精品网站,色悠久久久久综合欧美99

用ajax 仿百度谷歌搜索的下拉提示

Posted on 2008-09-25 17:44 魚躍于淵閱讀(664) 評論(0) 編輯收藏所屬分類: javascript相關

在用到實例中時 : 可把關鍵字定時從數據庫中取出來生成到一個XML文件中, 這樣能提高效率, 也便于AJAX取得數據.
這里只是提供一個思路和一個小小的實現 .

ajax09.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

.suggestions {

background-color: #FFF;

padding: 2px 6px;

border: 1px solid #000;

width : 60px ;

}

.suggestions:hover {

background-color: #69F;

}

#searchField.error {

background-color: #FFC;

}

</style>

var xhr = false ;

var statesArray = new Array() ;

window.onload = initAll ;

function initAll() {

//alert(document.getElementById("popups").innerHTML) ;

//document.getElementById("popups").onmouseover = test ;

setArray() ;

initArray() ;

document.getElementById("searchField").onkeyup = searchSuggest ;

document.getElementById("searchField").onblur = hideDiv ;

}

function test(evt){

var thisDiv = evt ? evt.target : window.event.srcElement ;

thisDiv.innerHTML = "haha" ;

document.getElementById("popups").appendChild(thisDiv) ;

}

function initArray(){

statesArray[0] = "china" ;

statesArray[1] = "jappan" ;

statesArray[2] = "USA" ;

statesArray[3] = "UK" ;

statesArray[4] = "chinabbc" ;

statesArray[5] = "UKYSB" ;

statesArray[6] = "UKL" ;

statesArray[7] = "chincbin" ;

}

function searchSuggest() {

var str = document.getElementById("searchField").value ;

//alert(str) ;

if(str != ""){

document.getElementById("popups").innerHTML = "" ;

for(var i=0; i<statesArray.length; i++){

var state = statesArray[i] ;

if(state.toLowerCase().indexOf(str.toLowerCase()) == 0){

var tempDiv = document.createElement("div") ;

tempDiv.innerHTML = state ;

tempDiv.className = "suggestions" ;

tempDiv.onclick = makeChoice ;

document.getElementById("popups").appendChild(tempDiv) ;

}

var resultcount = document.getElementById("popups").childNodes.length ;

//alert(resultcount) ;

if(resultcount == 0){

//alert(resultcount) ;

document.getElementById("searchField").className = "error" ;

}

if(resultcount == 1){

//alert(resultcount) ;

document.getElementById("searchField").value = document.getElementById("popups").childNodes[0].innerHTML ;

document.getElementById("popups").innerHTML = "" ;

}

function makeChoice(evt){

//alert("makeChoice !") ;

var thisDiv = evt ? evt.target : window.event.srcElement ;

//alert(thisDiv.innerHTML) ;

document.getElementById("searchField").value = thisDiv.innerHTML ;

document.getElementById("popups").innerHTML = "" ;

}

function setArray(){

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest() ;

}else{

if(window.ActiveXObject){

try{

xhr = new ActiveXObject("Microsoft.XMLHttpRequest") ;

}catch(e){}

}

if(xhr){

xhr.onreadystatechange = showContents ;

xhr.open("GET", "ajax09.xml", true) ;

xhr.send(null) ;

}else{

document.getElementById("preWin").innerHTML = "sorry ! but your pc coundn't create a xhr object !" ;

}

function showContents(){

if(xhr.readyState == 4){

if(xhr.status == 200){

var msg = xhr.responseXML.getElementsByTagName("item") ;

}else{

var msg = "error status = " + xhr.status ;

}

for(var i=0; i<msg.length; i++){

//alert(msg[i].childNodes[0].nodeValue) ;

statesArray[i] = msg[i].childNodes[0].nodeValue ;

}

</script>

</head>

<body>

please input some worlds : <br />

</center>

</body>

</html>

ajax09.xml

<?xml version="1.0" encoding="UTF-8"?>

<item>china</item>

<item>jappan</item>

<item>chinabbc</item>

<item>UKYSB</item>

<item>chincbin</item>

</states>

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: javascript的作用域和閉包 javascript后臺菜單 addEventListener－有用的筆記 addEventListener－event 對象的屬性和方法 addEventListener－第三個參數 useCapture addEventListener－事件流 addEventListener－開始 JS:attachEvent和addEventListener 使用方法 JavaScript(js)靜態頁面傳值之Cookie篇 js頁面接傳值問題

魚躍于淵

導航

留言簿(1)

文章分類

文章檔案

搜索

最新評論

用ajax 仿百度谷歌搜索的下拉提示