类似百度的搜索

最新推荐文章于 2019-02-22 14:59:28 发布

wang的CSND

最新推荐文章于 2019-02-22 14:59:28 发布

阅读量969

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/lb809663396/article/details/17554905

Jquery 专栏收录该内容

44 篇文章

订阅专栏

html页面里的代码

<html>
<head>
    <title></title>
    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var main = "";
        var time;
        $(function () {
            var all = $("body").html(); //得到body里全部内容，包括元素
            var addall = all + "<div id='xian'></div>"; //在body的最后面加一个div
            $("body").html(addall);
            $("#Text1").focus(function () { //取得表单域的焦点
                time = setInterval(zhi, 1000);
            });
            $("*").click(function () { //点击其他任何地方的隐藏xian
                $("#xian").css("display", "none");
            });
        })

       function zhi() {
           var content = $("#Text1").val();
           if (content != main) { //如果文本框中的值跟main的值不相同就把值赋值给main,也就是当文本框里的值改变时
               main = content;
               if (content != "") {
                   $("#xian").empty(); //清空元素
                   seach();
               }
           }
        }
        function seach() {
            var content = $("#Text1").val();
            content = trim(content); //因为js里没有trim方法，所以要自己写一个方法去掉左右两遍的空格
            if (content == "") { //判断文本框是否为空
                return;
            }
            $.post("Seach.ashx", { "num": content }, function (data, status) {
                if (status == "success") {
                    var zb = $("#Text1").offset(); //得到元素的坐标，offset分本是left和top
                    if (data == "no") { //判断数据里面是否有匹配的数据，
                        $("#xian").css("display", "none");
                        return;
                    }
                    var jj = $.parseJSON(data);
                    if (data != "") {
                        $("#xian").css( //给添加的div添加css样式
                           { "position": "absolute", //绝对的位置
                            "background-color": "#cccccc",
                            "color": "#ffffff",
                            "display": "block", //控制隐现
                            "top": zb.top + 23,
                            "left": zb.left,
                            "width": "154px",
                            "text-align": "center",
                            "border": "1px solid #00ff00",
                            "line-height": "22px",
                            "z-index": "102"
                }); //添加css

                        $.each(jj, function () {
                            $("#xian").append("<div>" + this.content + "</div>");
                            $("#xian div").click(function () { //给添加的div添加单击事件
                                $("#Text1").val($(this).text()); //把该div里的数据显示到Text1里
                                window.clearInterval(time); //停止setInterval的循环
                                //$("#xian").css("display", "none");
                            });
                            $("#xian div").mouseover(function () { //鼠标放上去
                                $(this).css("background", "#ff0000");
                                $("#xian").css("display", "block");
                            });
                            $("#xian div").mouseout(function () { //鼠标离开
                                $(this).css("background", "#cccccc");
                            });
                        });
                    }
                }

            });
        }
        function trim(str) { //删除左右两端的空格
            return str.replace(/(^\s*)|(\s*$)/g, ""); //把空格替换为空
        }

</script>
</head>
<body>
<input id="Text1" type="text" />
</body>
</html>

ashx页面的代码

<%@ WebHandler Language="C#" Class="Seach" %>

using System;
using System.Web;
using System.Data;
using System.Web.Script.Serialization;
using System.Collections.Generic;

public class Seach : IHttpHandler {

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

       string txt= context.Request["num"].ToString();
        int len=txt.Length; //得到文本框中值的长度
        List<cc> ll = new List<cc>();

        DataTable dt = NewMethod();

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                string str = (dt.Rows[i]["centent"].ToString()).Substring(0, len); //把查询的数据的长度截取跟传过来值的长度一样
                if (str == txt)
                {
                    cc lei = new cc();
                    lei.content = dt.Rows[i]["centent"].ToString();
                    ll.Add(lei);
                }

            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            if (ll.Count != 0)
            {
                context.Response.Write(jss.Serialize(ll));
            }
            else {
                context.Response.Write("no");
            }

    }

    private static DataTable NewMethod()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("centent", typeof(string));

        DataRow newRow1 = dt.NewRow();
        newRow1["centent"] = "我要成功";
        dt.Rows.Add(newRow1);
        DataRow newRow2 = dt.NewRow();
        newRow2["centent"] = "我奋斗";
        dt.Rows.Add(newRow2);
        DataRow newRow3 = dt.NewRow();
        newRow3["centent"] = "好好学习";
        dt.Rows.Add(newRow3);
        DataRow newRow4 = dt.NewRow();
        newRow4["centent"] = "好工作";
        dt.Rows.Add(newRow4);
        DataRow newRow5 = dt.NewRow();
        newRow5["centent"] = "好男人";
        dt.Rows.Add(newRow5);
        DataRow newRow6 = dt.NewRow();
        newRow6["centent"] = "好女人";
        dt.Rows.Add(newRow6);
        DataRow newRow7 = dt.NewRow();
        newRow7["centent"] = "我饿了";
        dt.Rows.Add(newRow7);
        return dt;
    }
    public class cc
    {
        public string content { get; set; }
    }
    public bool IsReusable {
        get {
            return false;
        }
    }

}

复制下来就可以用的代码