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

83493467

2018-08-02

关注关注

本例使用的是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();
}
}