纯javascript，放百度自动补全

最新推荐文章于 2022-08-23 10:01:38 发布

1212111112212

最新推荐文章于 2022-08-23 10:01:38 发布

阅读量785

点赞数

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/u014649204/article/details/24022101

版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种利用JavaScript和PHP实现在线搜索功能的方法，通过前后端联动，实现在用户输入时实时获取并展示相关搜索结果。该实现包括前端输入框与后端数据库查询的交互，以及AJAX请求的使用，旨在提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是js代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    var inputVlaue;
    var div;
    var ul;
    var ccc ;//= ["111","222","2","3332","233","333","444","555","666","777","888","999"];
    var index = -1;
    /*初始化变量*/
    function init(){
        inputVlaue = document.forms["myForm1"].colors;
        div = document.getElementById("popup");
        ul = document.getElementById("colors_ul");
    }
    
    /*更新北京*/
    function updateBg(){
        for(var i=0;i<ul.getElementsByTagName('li').length;i++){
            ul.getElementsByTagName('li')[i].className = "clear";    
        }
    }
    function start(event){
         //兼容IE   
        event = event || window.event;  
        //如果按了down键           
        if(event.keyCode==40){  
            index = index + 1;
            //如果“提示”列表已经显示,则把焦点切换到列表中的第一个数据项上
            if(index == ul.getElementsByTagName('li').length){
                index = 0;
                updateBg();
                ul.getElementsByTagName('li')[index].className = "over" 
                inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
            }else{
                updateBg();
                ul.getElementsByTagName('li')[index].className = "over" 
                inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
            }
            return false;
        }  
        //如果按了up键  
        else if(event.keyCode==38){  
            index = index - 1;
            //alert(index);
            //如果“提示”列表已经显示,则把焦点切换到列表中的最后一个数据项上  
             if(index == -2){
                index = 0;
                updateBg();
                ul.getElementsByTagName('li')[index].className = "over" 
                inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
            }else if(index == -1){
                index = ul.getElementsByTagName('li').length - 1;
                updateBg();
                ul.getElementsByTagName('li')[index].className = "over" 
                inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
            }else{
                updateBg();
                ul.getElementsByTagName('li')[index].className = "over" 
                inputVlaue.value = ul.getElementsByTagName('li')[index].innerHTML ;
            }
            return false;
        }else if(event.keyCode==13){
                div.className = "show";
                return false;
        }else{
            index = -1;
            init();
            ajaxFunction(inputVlaue.value);
        }
    }
    /*清空*/
    function clearField(){
        for(var i = ul.childNodes.length - 1; i >=0; i--){
            ul.removeChild(ul.childNodes[i]);
        }
        div.className = "hide";
    }
    
    /*设置显示*/
    function setField(pipei){
        /**/
        div.className = "show";
        clearField();
        var oLi;
        for(var i = 0;i<pipei.length;i++){
            oLi = document.createElement("li");
            ul.appendChild(oLi);
            oLi.appendChild(document.createTextNode(pipei[i]));
            oLi.onmousemove = function(){
                updateBg()
                this.className = "mouseover";    
            }
            oLi.onmouseout = function(){
                updateBg()
                this.className = "mouseout";    
            }
            oLi.onclick = function(){
                inputVlaue.value = this.firstChild.nodeValue;    
                clearField();
            }
        }
    }
    
    /*发送ajax请求*/
    function ajaxFunction(colors){
        var xmlHttp;
        var re = "";
         try{
           // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        }catch (e){
            // Internet Explorer
           try{
              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
           }catch (e){
                   try{
                     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e){
                     alert("您的浏览器不支持AJAX！");
                     return false;
                 }
              }
        }
     
        xmlHttp.onreadystatechange=function(){
          if(xmlHttp.readyState==4){
             var ccc = xmlHttp.responseText.split("|");
              /*设置显示*/
                if(ccc.length > 0){
                    setField(ccc);
                }else{
                    clearField();    
                }
            }
          }
        xmlHttp.open("GET","index.php?colors="+colors,true);
        xmlHttp.send(null);
 
     }
  
</script>
</head>

<body>
<form action="index.php" name="myForm1">  
        搜索:<input type="text" name="colors" id="colors" autocomplete="off" οnkeyup="start(event);" />
        <input type="hidden" name="add" value="add" />
    </form>  
    <div id="popup">  
        <ul id="colors_ul"></ul>  
    </div>
</body>
<style type="text/css">
    <!--  
    body{  
        font-family: Arial,Helvetica,sans-serif;  
        font-size: 12px; padding: 0px; margin: 5px;  
    }  
    form{padding: 0px; margin: 0px;}  
    input{  
        /*用户输入框的样式*/  
        font-family: Arial,Helvetica,sans-serif;  
        font-size: 12px; border: 1px solid #000000;  
        width: 200px; padding: 1px; margin: 0px;  
    }  
    #popup{  
        /*提示框div块的样式*/  
        position: absolute; width: 202px;  
        color: #004a7e; font-size: 12px;  
        font-family: Arial,Helvetica,sans-serif;  
        left: 36px; top: 25px; border:1px solid #666;
    }  
    #popup.show{  
        /*显示提示框的边框*/  
        border: 1px solid #004a7e;  
    }  
    #popup.hide{  
        /*隐藏提示框的边框*/  
        border: none;     
    }  
    /*提示框的样式风格*/  
    ul{  
        list-style: none;  
        margin: 0px; padding: 0px;  
    }  
    li.mouseover{  
        background-color:#666;  
        color: #FFFFFF;  
    }  
    li.mouseout{  
        background-color: #FFFFFF;  
        color: #004a7e;  
    }
    li.clear{background-color:#FFF;color: #004a7e;}
    li.over{ background-color:#666; color:#FFFFFF;}
    --> 
</style>
</html>

下面是php服务端：

<?php
    header("Content-type: text/html; charset=utf-8");
    $conn = mysql_connect("localhost","root","") or die("not connect mysql");
    mysql_select_db("t");
        
    $colors = $_GET["colors"];
    if(isset($_GET["add"])){
        $sql ="INSERT INTO `t`(`username`, `count`) VALUES ('".$_GET["colors"]."',1)";
        if(mysql_query($sql,$conn)){
            header("Location:index.html");
        }
        echo $sql;
        var_dump(mysql_error());
        echo $_GET["colors"];
    }else if(!empty($colors)){
        $sql = "select * from t where username like '%{$colors}%'";
        $re = mysql_query($sql);
        while($row[] = mysql_fetch_array($re,MYSQL_ASSOC)){}
        
        
        $str = "";
        //var_dump($row);
        foreach($row as $k => $v){
            $count = count($row);
            if($k < $count - 2){
                $str .= $v["username"]."|";
            }else{
                $str .= $v["username"];
            }
        }
        echo $str;
        
    }