您的位置：首页 > Web前端 > JQuery

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

2014-07-11 16:49 771 查看

<%@ 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();

    }
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航