将最美的计算机软件奉献给社会

博客园 首页 新随笔 联系 订阅 管理

注意事项:要使用jQuery首先要把它的包引用进来( <script type="text/javascript" language="javascript" src="js/jquery-1.2.3.js"></script>)

本功能实现的原理简述:通过输入框的keyup事件,在后台把输入框当前的数据传入后台进行处理(以json格式传输),本例的后台处理文件是一个ashx文件。后台得到json数据后从数据库里取数据,然后回传到前台;前台显示的是一个类似百度和谷歌的下拉框,本例是这样实现的,把从后台传过来的每一个记录,通过jQuery动态生产一个<li></li>,然后把这些li放到一个div里取,再给这些li设置CSS,然后根据CSS就可以选择记录。

请看代码:

前台:

js文件:

<script language="javascript" type="text/javascript">
        
        $(function(){
        $("#keyword").bind("keyup",triggerAjax).bind("blur",input_blur);
        $("body").click(li_click); //很奇怪,在dvResult低边框以下click时不会触发li_click事件,这个问题还需改进
        });
       
        function triggerAjax()
        {   
             $.get("AutoComplete.ashx",SendingData(),callback);
        }
       
        function input_blur()
        {
            if($(".MouseOverLi").size()>0)//判断是否选择了项
            {
                $("#keyword").val($(".MouseOverLi").html());//选了某一项,则把它的值赋给输入框
                $("#dvResult").fadeOut("3000"); // 隐藏div
            }
        }
       
        function li_click()
        {
            //$("#keyword").val($(this).html());
            $("#dvResult").fadeOut("3000"); // 隐藏div
        }
       
        // 回调函数,处理从服务器端返回的数据
        function callback(data)
        {
          $("#dvResult").slideDown("3000");
           if(data!="")
           {   
                $("#dvResult").html(""); //清空前一次返回的数据
                var keys = data.split(";"); //把返回的字符串(以;分割)转变成数组
                var len = keys.length;
                for(count = 0;count<len-1;count++)
                {
                    $("#dvResult").append("<div class='item'>"+keys[count]+"</div>");
                }
               
               
                $("#dvResult").addClass("HasDataDiv");
                $(".item").mouseover(function(){$(this).addClass("MouseOverLi");});
                $(".item").mouseout(function(){$(this).removeClass("MouseOverLi");});
               
                //选中值
                $(".item").click(function(){
                    $("#keyword").val($(".MouseOverLi").html());//选了某一项,则把它的值赋给输入框
                    $("#dvResult").fadeOut("2000"); // 隐藏div
                });
            }
            else
            {
                $("#dvResult").html($("#keyword").val()+" 不存在!");
            }
        }
       
        // 向服务器端发送要处理的数据
        function SendingData()
        {
            var keyword,table,field,_json;
           
            _keyword = $("#keyword").val(); //检索用到的关键字
            _table = "Users"; //数据库名称
            _field = "userName"; //要检索的字段
           
            _json = {keyword:_keyword,table:_table,field:_field};
           
            return _json;
           
        }
    </script>

HTML:

<body  style="text-align: center">
    <form id="form1" runat="server">
    <table style="padding-top: 5px" cellpadding="0" cellspacing="0">
        <tr>
            <td style="height:5px"></td>
        </tr>
        <tr valign="top">
            <td>
                <input  id="keyword" name="keyword" type="text" />
            </td>
            <td>
                <input id="Button1" type="button" value="搜索" />
            </td>
        </tr>
         <tr>
            <td colspan="2">
                <div id="dvResult" style="text-align:left; height:100px; overflow:auto;">
                   
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>

 

/*******************后台处理逻辑***************************/

 

public class AutoComplete : IHttpHandler
{
    public AutoComplete()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        if (context.Request.Params["keyword"] != null && context.Request.Params["table"] != null && context.Request.Params["field"] != null)
        {

            string keywordTemp=context.Request.Params["keyword"].ToString();
            string tableTemp=context.Request.Params["table"].ToString();
            string fieldTemp=context.Request.Params["field"].ToString();

            string returnStr = "";
            returnStr = AutoCompleteGetResult.GetResult(keywordTemp, tableTemp, fieldTemp);
            context.Response.Clear();
            context.Response.Write(returnStr);
            context.Response.End();
        }
        else
        {
            context.Response.Clear();
            context.Response.Write("自动提示无法启动");
            context.Response.End();
        }
    }

    public bool IsReusable
    {
        get
        {
            return true;
        }
    }
}

 

 

public class AutoCompleteGetResult
{
    public AutoCompleteGetResult()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }
    public static string GetResult(string keyword, string tableName, string field)
    {
       
        string[] key = keyword.Split(' ');
        StringBuilder sql = new StringBuilder();
       
        sql.Append("SELECT " + field + " FROM " + tableName + " where 1=1");

        for (int i = 0; i < key.Length; i++)
        {
            sql.Append(" and " + field + " like '%" + key[i] + "%'");
        }

        DataTable dt = DBClass.ExecuteDataSet(sql.ToString()).Tables[0];
       
        string returnStr = "";
        try
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                returnStr += Convert.ToString(dt.Rows[i][field]) + ";";
            }
           
        }
        catch { }

        return returnStr;
    }
}

posted on 2010-09-25 17:08  赖顺生  阅读(3130)  评论(0编辑  收藏  举报