Jquery+ajax 实现多文本仿百度自动补全

这是我的第一篇博客，作为一个菜鸟Coder！代码肯定有考虑不周之处，请各位大牛多多提意见建议！感激....

实现思路：

自动补全就是根据用户在文本框中的输入然后去数据库中匹配与输入相符合的内容，然后显示！但是如果使用文本的TextChange事件来操作的话就达不到一个实时更新的效果！所以，这儿采用的是AJAX技术来进行的处理。使用Jquery进行控制显示。

流程：

文本框keyup事件-->Ajax请求-->服务端访问数据库，抽出数据，处理成字符串-->返回给Ajax回调函数-->处理字符串，并动态生成DIV显示-->Jquery处理选择，控制显示。

采用的技术：

① ：ADO.NET

该程序采用ADO.NET访问数据库，其连接字符串在WebConfig中设置！通过使用ADO.NET与数据库建立连接，并做相应的数据库操作！对于本程序，其操作就是一个查询，通过用户输入的关键字使用模糊查询，将数据库中的满足条件的前5条记录查询出来，并用Jquery控制显示！其sql语句为：“SELECT TOP 5 WORDS FROM HotWords WHERE WORDS LIKE '%"+keywords+"%' ORDER By words”其中keywords为传入的参数！查询时是用的Sqldatareader对象从数据库中一条条读出！保存在KeyWords这样一个实体类中！

public partial class Ajax : System.Web.UI.Page

{

DB db = new DB();//实例化一个数据操作类的对象

protected void Page_Load(object sender, EventArgs e)

{

string res = xians();

Response.Write(res);//将得到的字符串返回到前台

Response.End();

}

/// <summary>

/// 处理得到的数据

/// </summary>

/// <returns></returns>

public string xians()

{

String strb = null;

string txt = Request["key"];//接收客户端传上来的参数，这儿是ajax传的（data）

if (txt != "" && txt != null)

{

List<HotWords> list = db.GetWordsByKey(txt);//调用数据操作类的方法，得到数据

for (int i = 0; i < list.Count; i++)

{

strb += list[i].Words + ",";//用，将得到的数据分开

}

if(strb!=null){

strb=strb.Substring(0,strb.Length-1);//去掉最后一个，

}

return strb;

}

② ：前台ajax+jquery

在前台页面上使用Jquery+ajax，当文本框Keyup事件激发的时候就用Jquery的AJAX技术去访问后台服务（使用的是一个页面（ajax.aspx）来做的处理）!完成之后就用DIV将从服务端得到是信息进行显示！

具体操作：

① 前台界面：

<body>

</div>

</form>

</body>

在前台页面放置了5个文本框，设置他们的id，id应该设置为有规律，便于后面的Jquery控制！这儿没有显示用的DIV，其显示DIV应该在文本输入时动态添加！

② 样式设置：

input

{

width: 395px;

}

.xianshi

{ border-style: solid;

border-color: Silver;

border-width: 1px;

width: 399px;

position: absolute;

background-color: White;

}

table

{

width: 400px;

}

</style>

设置了DIV的样式以及设置了输入框的样式！注意这儿设置显示DIV的样式其position属性设置为absolute不然它显示时会影响布局！

③ Jquery+Ajax部分：

当文本框激发Keyup事件的时候就使用Ajax去访问后台！

$("input").keyup(function(e) {

var ID = $(this).attr("id"); //得到当前的txt的ID

var idNum = $(this).attr("id").replace("txt", "");//得到文本框ID的数字

var divid = "div" + idNum; //得到显示的div的ID

var trid = "tr" + idNum; //得到选中的行的ID

if (e.keyCode != 38 && e.keyCode != 40 && e.keyCode != 13) {

$.ajax({

url: "Ajax.aspx",

type: "Post",

data: { key: $("#" + ID + "").val() },

success: function(res) {//请求成功

var str = res.split(","); //对服务端传回来的数据进行处理，以，分割

if (str == "" || str == null) {

//判断回发的数据是否为空，空就隐藏所有显示DIV，并移除前面的所有显示div

$(".xianshi").hide();

$(".xianshi").remove();//移除上次显示的div

}

else {

//回发的数据不为空，说明从数据库中查询到了相符的数据

$(".xianshi").remove(); //移除上次的显示div

$("#" + ID + "").after("<div id=div" + idNum + " class="xianshi"></div>");//动态添加显示用DIV

for (var i = 0; i < str.length; i++) {

//向显示的DIV中追加table，并动态生成TR,TD这儿设置tr，td的ID属性设置为有规律，便于控制

$(".xianshi").append("<table><tr id=tr" + i + "><td id=TD" + i + ">" + str[i] + "</td></tr></table>");

//显示刚才隐藏起来的DIV

$(".xianshi").show();

//单击时给txt赋值

$("tr").click(function() {

var txtstr = $(this).text();

$("#" + ID + "").val(txtstr);

$(".xianshi").hide();

})

//鼠标悬停变色

$("tr").mousemove(function() {

$(this).css("background-color", "silver");

})

//鼠标移除返回原色

$("tr").mouseout(function() {

$(this).css("background-color", "white");

})

}

})

}

以上部分就是我们在文本框中输入时，经Ajax请求后，处理返回值并控制显示DIV的显示！这儿需要注意的就是每次请求后无论是否得到数据都要将上次生成的DIV给remove掉，不然显示的数据会无限累加！使用Jquery控制单击的行，我们在TR上单击的时候就将单击行的内容值赋值给我们的当前文本框！同样控制选中行的样式！这儿还必须注意的是在Keyup的时候我们必须排除掉上键，下键，和enter键！当点击他们时不去执行AJAX部分，不然他会将我们用键盘选中的值拿到数据库中去匹配，这就达不到想要的效果啦。。

④ ：键盘选择时的处理

键盘选择当然还是在文本框中的keyup事件中处理，首先声明一个全局变量来记录点击上键或者下键的次数，然后通过该全局变量控制“被选中”的行的样式

if (e.keyCode == 38) {//点击上键

selected--;

if (selected < 0) {

//找到DIV下所有的table子元素

var alltr = $("#div" + idNum + "").children("table");

//确定动态生成的table数

selected = (alltr.length) - 1;

//所有的TR设置为白色

$("tr").css("background-color", "white");

var tr = "#tr" + selected;

//选中行设置为灰色

$("table " + tr + "").css("background-color", "silver"); //给当前的txt赋值

$("#" + ID + "").val($("#tr" + selected + "").text());

}

注意：这儿控制“被选中”行的样式时前面必须加上table，因为动态生成了5个table不加table的话它默认操作的是第一个table导致后面的table中的行选中没有效果

这仅仅是点击上键的时候的处理，selected是一个全局变量，用来控制的是选中行！在点击enter键的时候必须将selected初始化！不然selected会被记录，导致选择下个文本框内容时不是从第一个开始选择！其中下键，和enter键做类似操作

⑤ ：ajax后台（ajax.aspx）