2012-05-17 11:30 自动补全代码 jquery+ajax+php+mysql

来源：互联网发布：java建站编辑：程序博客网时间：2024/05/16 19:51

/*
* @author echo.d
* @email 840206883@qq.com
*/

数据库

数据库名：search

表名：auto

|-id

|-content

目录如下：

|-index.php

|-search.php

|-style.css

|-script

|-jqury.js 自己去下本人不提供资源网站：http://jquery.com/

|-auto.js

index.php代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery+ajax自动补全</title>
    <script type="text/javascript" src="./scripts/jquery.js"></script>
    <script type="text/javascript" src="./scripts/auto.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
      <input type="text" id="search_word" class="search_word" size="40" maxlength="40"/>
      <input type="button" name="sub" value="提交"/>
      <div id="search_div">
        <ul id="search_ul"></ul>
      </div>
    </body>
    </html>

search.php代码如下：

<?php
    $conn = @mysql_connect("localhost","root","") or die ("连接数据库错误".mysql_error());
    mysql_select_db("search",$conn)or die ("没有这个数据库".mysql_error());
    mysql_query("set names 'utf8'");
    $search_word = $_GET[search_word];
    $str = "select * from auto where `content` LIKE '".$search_word."%'";
    $result = mysql_query($str);
    while($row = mysql_fetch_array($result)){
        $content[] = $row['content'];
    }
    echo json_encode($content);
?>

style.css代码如下：

body{ font-family:Arial;font-size:14px; padding:0px; margin:10px;}
.search_word{ width:200px; }/* 用户输入框的样式 */
.show{border:1px solid #004a7e;}/* 显示提示框的边框 */
ul{list-style:none; margin:0px; padding:0px; color:#004a7e;}
.mouseOver{ background-color:#004a7e;color:#FFFFFF;}

auto.js代码如下：

2012年05月19 修复bug '回车输入汉字字符不ajax'
    $(function(){
        //初始化变量
        var li_index = -1;        //li索引值
        var search_word = $("#search_word");
        var search_div = $("#search_div");
        var search_ul = $("#search_ul");
        var enter_var = 1; //回车变量(用于区分是汉字输入字母按下enter【enter_var = 1】;还是按上下键然后按下enter【enter_var = 2】选择<li>元素)
        //布局div 关键词显示域
        search_div
        .css("border","1px solid black")
        .css("position","absolute")
        .css("top",search_word.offset().top+search_word.height()+6+"px")
        .css("left",search_word.offset().left+"px")
        .css("width",search_word.width()+4+"px")
        .hide();
        //清除提示内容
        var clearContent = function(){
            if(search_ul != null){
                search_ul.find("li").remove();//删除ul元素下所有子节点
            }
            if(search_div != null){
                search_div.hide();
            }
        }
        //显示内容
        var setContent = function(theContent){
            clearContent();
            search_div.show();
            for(str in theContent){
                $("<li>"+theContent[str]+"</li>").appendTo(search_ul);
                //li元素被单击选中和鼠标滑过有特效
                search_ul.find("li").click(function(){
                    search_word.val($(this).text());
                    clearContent();
                }).hover(
                    function () { $(this).addClass("mouseOver");},
                    function () { $(this).removeClass("mouseOver");}
                );
            }
        }
        //ajax同步到数据
        search_word.keyup(function(event){
            var event = event || window.event;
            var key_code = event.keyCode;
            if((key_code >= 65 && key_code <= 90) || key_code == 8 || key_code == 46 || key_code == 32 || (key_code == 13 && enter_var == 1)){
                if(search_word.val().length > 0){
                    search_str = search_word.val();//拿到用户输入的词
                    $.ajax({
                        type : "get",
                        url : "search.php",
                        dataType : "json",
                        data : {search_word : search_str},
                        success : function(data){
                            if(data !== null){
                                setContent(data);
                            }else if(data == null){
                                clearContent();
                            }
                        }
                    });
                }else{
                    clearContent();
                }
            }else if(key_code == 38 || key_code == 40){
                if(key_code == 38){//按向上键
                    var autoLiNode = search_ul.find("li");
                    if(li_index != -1){
                        autoLiNode.eq(li_index).removeClass("mouseOver");
                        li_index--;
                    }else{
                        li_index = autoLiNode.length-1;
                    }
                    if(li_index == -1){//如果到顶高亮移动到最后一个
                        li_index = autoLiNode.length-1;
                    }
                    autoLiNode.eq(li_index).addClass("mouseOver");
                    var context = autoLiNode.eq(li_index).text();
                    search_word.val(context);
                    enter_var = 2;
                }else if(key_code == 40){//按向下键
                    var autoLiNode = search_ul.find("li");
                    if(li_index != -1){
                        autoLiNode.eq(li_index).removeClass("mouseOver");
                    }
                    li_index++;
                    if(li_index == autoLiNode.length){
                        li_index = 0;
                    }
                    autoLiNode.eq(li_index).addClass("mouseOver");
                    var context = autoLiNode.eq(li_index).text();
                    search_word.val(context);
                    enter_var = 2;
                }
            }else if(key_code == 13 && enter_var == 2){//输入回车
                if(li_index != -1){
                    var context = search_ul.find("li").eq(li_index).text();
                    clearContent();
                    li_index = -1;
                    search_word.val(context);
                }
                enter_var = 1;
            }
        });
    });