鱼跃于渊

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

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

Posted on 2008-09-25 17:40 鱼跃于渊 阅读(776) 评论(0)  编辑  收藏 所属分类: javascript相关

 

<!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() {
        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 hideDiv(){
        document.getElementById("popups").innerHTML = "" ;
    }
</script>

</head>
<body>
<center>
    please input some worlds : <br />
    <input type="text" id="searchField" value="" size="60px" /><br />
    <div id="popups">ddd</div>
    &nbsp;&nbsp;
    <input type="submit" value="submit" /><br /><br />
    
</center>
</body>
</html>

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