Jquery实现边输入边查询，仿百度，并可以选择查询的值赋到输入框

最新推荐文章于 2023-04-26 15:08:48 发布

zziamalei

最新推荐文章于 2023-04-26 15:08:48 发布

阅读量6k

点赞数

分类专栏： c#

本文链接：https://blog.csdn.net/zziamalei/article/details/37693309

版权

c# 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本例使用的是jquery-1.9.1，c#，稍加修改，也可以用于jsp，php等

主显示页面bsbc.aspx，代码如下

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

<!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>

    <script src="jquery-1.9.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $().ready(function() {
            //输入框键盘按键松开事件
            $("#shuru").keyup(function() {

                $.post("bsbcUser.aspx?username=" + $("#shuru")[0].value, function(data) {
                    $("#testDIV").show();
                    $("#testDIV").empty();

                    $("#testDIV").append(data);

                    //偶数行
                    //$("tr:odd").css("background-color", "#e5e5e5");//背景色
                    $("tr:odd").each(function() {

                    });
                    //奇数行
                    $("tr:even").each(function() {
                        //单击事件
                        $(this).click(function() {

                        });
                    });

                });

                /*****************/
                //设置div位置，在input后面
                var shuru = $("#shuru");
                var offset = shuru.offset();
                $("#testDIV").css('left', offset.left + shuru.width() + 2 + 'px')
				              .css('top', offset.top + 'px')
				              .css('position', 'absolute')
				              .css('z-index', '99')
				              .fadeIn();
                /******************/


                //Div鼠标滑过事件

                $("#testDIV").mouseover(

                   function() {

                       //firstCol列添加click事件，给其他控件赋值

                       $(".firstCol").click(function() {
                           $("#shuru").val($(this).text());
                           $("#testDIV").empty();
                       });
                   }

                );

                $("#testDIV").mouseleave(

                   function() {
                       //置空div
                       $("#testDIV").empty();
                   }

                );
                /******************/

                //回车事件
                 //  $(window).keydown(function(event) {
                    //   switch (event.keyCode) {
                           // ... 
                           // 不同的按键可以做不同的事情 
                           // 不同的浏览器的keycode不同 
                           // 更多详细信息:     http://unixpapa.com/js/key.html 
                        
                        //case 13:
                        //   break;
                    //   }
                 //  });
                /*******************/

            });


        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    </form>
    <h3>
        请在下面的输入框中键入字母（A - Z）：</h3>
  
    <input id="shuru" type="text" style="border: 1px solid" />
    
    <div id="testDIV" style="height: 200px; width: 200px; overflow: auto; color: #0000FF">
    </div>
</body>
</html>

post跳转回传页面，前台无代码html代码，后台代码直接respon.wrilte，输出html文本

bsbcUser.aspx前台代码

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

<head id="Head1" runat="server">
</head>

bsbcUser.aspx后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;

public partial class Test_bsbcUser : BasePageWithHR
{
    protected void Page_Load(object sender, EventArgs e)
    {


        Response.Write("<table  height='200px'>" + test() + "</table>");
    }

    public String test()
    {
        string sql = "select * from [user] where user_name like'%"+Request["username"]+"%'";

        DataSet ds = Commons.PublicMethod.Instance.PublicTable(sql);//数据库查询


        StringWriter sw = new StringWriter();
        
        sw.WriteLine("<table cellspacing='0' style='background-color:#e5e5e5'border='1' id='tabTest'>");
        if (ds.Tables[0].Rows.Count > 0)
        {
            int i = 0;
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                i++;
                sw.WriteLine("<tr>");
                sw.WriteLine("<td>" + i);

                sw.WriteLine("</td>");
                sw.WriteLine("<td  class='firstCol'>" + dr["user_name"].ToString());

                sw.WriteLine("</td>");
                sw.WriteLine("<td>" + dr["password"].ToString());

                sw.WriteLine("</td>");
                sw.WriteLine("</tr>");
            }
        }
        else {
            sw.WriteLine("<tr>");
            sw.WriteLine("<td>" );
            sw.WriteLine("抱歉，没有该关键词的相关数据");
            sw.WriteLine("</td>");
            sw.WriteLine("</tr>");
        }
       sw.WriteLine("</table>");
       return sw.ToString();
    }
}