Jquery Ajax智能提示

最新推荐文章于 2021-08-06 00:56:21 发布

ws_hgo

最新推荐文章于 2021-08-06 00:56:21 发布

阅读量3.2k

点赞数 1

分类专栏： JQuery 文章标签： jquery ajax function xhtml string server

本文链接：https://blog.csdn.net/ws_hgo/article/details/6650200

版权

JQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryAjax_Default" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
    .message
    {
        position:relative;
        left:10px;
        background-color:Gray;
        width:150px;
        margin:10px 0 0 160px;
        border:1px soild Red;
    }
    .namelist
    {
      list-style:none;
      margin:0px;
      padding:0px;
    }
    .hover
    {
      background-color:Red;
      color:Blue;    
    }
    </style>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.message').hide();
            $("#name").keyup(function () {
                var name = $("#name").val();
                var data = 'userName=' + name;
                $.ajax({
                    type: "GET",
                    url: "Default.aspx",
                    data: data,
                    success: function (Msg) {
                        $('.message').show();
                        $('.namelist').html(Msg);
                        $('li').hover(function () {
                            $(this).addClass('hover');
                        }, function () {
                            $(this).removeClass('hover');
                        });

                        $('li').click(function () {
                            $('#name').val($(this).text());
                            $('.message').hide();
                        })
                    }
                });
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <label>Please Enter Your Name</label>
    <input type="text" id="name" /><br />
    </div>
    <div class="message">
        <div class="namelist">
    
        </div>
    </div>
    </form>
</body>
</html>

  StringBuilder StrName = new StringBuilder();
    List<string> ListName = new List<string>();

    protected void Page_Load(object sender, EventArgs e)
    {
        
        ListName.Add("huguo");
        ListName.Add("guo");
        ListName.Add("guoguo");
        ListName.Add("ws_hgo");


        if (Request.QueryString.Count != 0)
        {
            string name = Request.QueryString["userName"].ToString();
            if (ListName.Contains(name))
            {
                ListName.ForEach(GetNames);
                Response.Write(StrName.ToString());
            }
            else
            {
                Response.Write("当前用户不存在！");
            }
            Response.End();
        }
    }
    public void GetNames(string name)
    {
        StrName.AppendFormat("<li>{0}</li>", name);
    }