jquery ajax 实现文本框自动完成效果

HTML部分：

index.html文件内容

<!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="jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="auto.js"></script>
        <style type="text/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;}
        </style>
    </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>

 

PHP部分代码：

search.php文件

<?php

    //
    $link = @mysql_connect("localhost","root","") or die ("数据库连接错误".mysql_error());
    mysql_select_db("mywebsite",$link)or die ("数据库连接错误".mysql_error());
    mysql_query("set names 'utf8'");

    //
    $search_word = $_GET['search_word'];
    
    $str = "select * from auto where keyword LIKE '%".$search_word."%'";
    $result = mysql_query($str);
    while($row = mysql_fetch_array($result)){
        $keyword[] = $row['keyword'];
    }
    echo json_encode($keyword);
?>

 

js文件部分代码：

auto.js文件

$(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(key_code!=38 || key_code!=40 || key_code!=13){
                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;
            }
        });
    });

 

posted @ 2014-10-16 15:31  王永东gg  阅读(394)  评论(0)    收藏  举报