【修改】 Jquery实现边输入边查询，仿百度，并可以选择查询的值赋到输入框。选中行变色，鼠标变手型

最新推荐文章于 2021-06-03 17:22:01 发布

zziamalei

最新推荐文章于 2021-06-03 17:22:01 发布

阅读量2.3k

点赞数

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

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="bsbc.aspx.cs" Inherits="Test_bsbc" %>
<%@ Register Assembly="MyControl" Namespace="MyControl"  TagPrefix="cc1"%>

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

</head>
<body>
    <form id="form1" runat="server">
    </form>
    a<input id='aTest'>
    b<input id='bTest'>
    c<input id='cTest'>
    <hr />
    <h3>
        请在下面的输入框中键入字母（A - Z）：</h3>
   <input id="shuru" type="text" style="border: 1px solid" />
   
    aaaa
    
   
    
</body>

<script type='text/javascript'>

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

            $.post('bsbcUser.aspx?username=' + $('#shuru')[0].value, function(data) {
                $('#testDIV').show();
                $('#testDIV').empty();
                $('#testDIV').append(data);
                //选择行后，为相应的值赋值
                $('#tabTest tr').click(function() {
                    $('#tabTest tr').removeAttr('clk');
                    $(this).attr('clk', 'on');
                    $('#tabTest tr').each(function(index) {

                        if ($(this).attr('clk') == 'on') {
                            //alert(index);
                            $('#aTest').val($('#tabTest tr').eq(index).find('td').eq(0).text());
                            $('#bTest').val($('#tabTest tr').eq(index).find('td').eq(1).text());
                            $('#cTest').val($('#tabTest tr').eq(index).find('td').eq(2).text());
                            $('#testDIV').empty();
                            $('#testDIV').css('display', 'none');
                        }
                    });
                });

            });

            /*****************/
            //设置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('background-color', '#e5e5e5')
				              .css('z-index', '99')
				              .fadeIn();
            /******************/


            //Div鼠标滑过事件

            $('#testDIV').mouseover(

                   function() {
                       $('#tabTest tr').each(function() {
                           $(this).hover(function() {
                               $(this).css('background-color', '#FFE1FF');

                           }, function() {
                               $(this).css('background-color', '#e5e5e5');

                           }

                           );
                       });

                       $(this).css('cursor', 'hand');

                   });

            $('#testDIV').mouseleave(

                   function() {
                       //置空div
                       $('#testDIV').empty();
                       $('#testDIV').css('display', 'none');
                   }

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

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

            //case 13:
            //   break;
            //   }
            //  });
            /*******************/

        });

    });

</script>

<div id="testDIV" style="height: 200px; width: 200px; overflow: auto; color: #0000FF;
    display: none">
</div>
</html>

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' 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  class='firstCol'>");
                sw.WriteLine("<td>" + i);


                sw.WriteLine("</td>");
                sw.WriteLine("<td >" + 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();






    }
}