鱼跃于渊

First know how, Second know why !
posts - 0, comments - 1, trackbacks - 0, articles - 49

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

Posted on 2008-09-25 17:44 鱼跃于渊 阅读(657) 评论(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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">
    .suggestions {
    background-color: #FFF;
    padding: 2px 6px;
    border: 1px solid #000;
    width : 60px ;
    }
    
    .suggestions:hover {
        background-color: #69F;
    }
    #searchField.error {
    background-color: #FFC;
    }
</style>

<script type="text/javascript">
    
    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>
<center>
    please input some worlds : <br />
    <input type="text" name="searchField" value="" size="60px" /><br />
    <div id="popups">ddd</div>
    &nbsp;&nbsp;
    <input type="submit" value="submit" /><br /><br />
    
</center>
</body>
</html>

ajax09.xml

<?xml version="1.0" encoding="UTF-8"?>
<states>
    <item>china</item>
    <item>jappan</item>
    <item>USA</item>
    <item>UK</item>
    <item>chinabbc</item>
    <item>UKYSB</item>
    <item>UKL</item>
    <item>chincbin</item>
</states>


只有注册用户登录后才能发表评论。
网站导航: