我也不知道這個(gè)東西的學(xué)名是什么，暫且依據(jù)他的功能來(lái)命名吧！直接看的樣子就可以了。
思路分析：
此功能是根據(jù)TextBox文本框中輸入的內(nèi)容自動(dòng)從數(shù)據(jù)庫(kù)中匹配可能的搜索項(xiàng)。
1、需要Ajax異步獲取數(shù)據(jù)
2、DIV設(shè)置absolutely定位包裹數(shù)據(jù)集合
3、單擊內(nèi)容時(shí)把Value綁定到TextBox上并且DIV隱藏
局部步驟：
1、新建一個(gè)項(xiàng)目，我以Asp.Net為例，并且需要導(dǎo)入、引用JQuery包（PS：如果不引用需用JavaScript實(shí)現(xiàn)，自行Google補(bǔ)腦）
代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="AutoDropDownListDemo.Index" %>
<head runat="server">
<title>自動(dòng)提示DropDownList</title>
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id="txt_SOSO" />
</form>
</body>
</html>
2、 新建一般處理程序進(jìn)行后臺(tái)數(shù)據(jù)處理并異步發(fā)送回客戶(hù)端
這與實(shí)現(xiàn)此功能無(wú)關(guān)，不予介紹。
3、監(jiān)聽(tīng)TextBox文本值改變事件，并觸發(fā)Ajax。為了簡(jiǎn)單Ajax端用假數(shù)據(jù)直接拼接成<ul><li></li></ul>發(fā)送回客戶(hù)端。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
namespace AutoDropDownListDemo
{
/// <summary>
/// AjaxHandleResult 的摘要說(shuō)明
/// </summary>
public class AjaxHandleResult : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 假數(shù)據(jù)、并拼接成HTML
StringBuilder strHTML = new StringBuilder();
strHTML.Append("<ul>");
for (int i = 0; i < 30; i++)
{
// 此處聲明的class用戶(hù)在客戶(hù)端給li添加事件
strHTML.Append("<li class=\"dataNumber\">我是數(shù)據(jù)：" + (i + 1) + "</li>");
}
strHTML.Append("</ul>");
// 拼接成的HTML數(shù)據(jù)發(fā)送給客戶(hù)端
context.Response.Write(strHTML);
}
public bool IsReusable
{
get
{
return false;
}
}
}
} 以上就是服務(wù)器端回發(fā)給客戶(hù)端的數(shù)據(jù)，下面開(kāi)始用JQuery實(shí)現(xiàn)主角了
4、給TextBox注冊(cè)keyup事件，用于當(dāng)文本值改變時(shí)觸發(fā)
<script type="text/javascript">
$(document).ready(function () {
$("#text").keyup(function () {
});
});
</script>
5、TextBox文本值改變后觸發(fā)Ajax從后臺(tái)獲取數(shù)據(jù)
<script type="text/javascript"> $(document).ready(function () {
$("#txt_SOSO").keyup(function () {
autoPrompt($("#txt_SOSO"), $("#DIV_PANLE"));
});
});
/* AutoDropDownList實(shí)現(xiàn)
* event:觸發(fā)的事件源
* panle:AutoDropDownList顯示的位置
*/
function autoPrompt(event, panle) {
var topY = event.position().top; // 獲取事件源的Y坐標(biāo)
var leftX = event.position().left; // 獲取事件源的X坐標(biāo)
var eWidth = event.width(); // 獲取事件源的寬度
var eValue = event.val(); // 獲取事件源的Value
/* Ajax異步獲取數(shù)據(jù) */
$.ajax({
url: "AjaxHandleResult.ashx",
type: "POST",
data: { key: eValue },
success: function (data) {
if (data != null) {
// 創(chuàng)建一個(gè)，并設(shè)置必須的CSS
panle.append("<div style='top:" + topY +
";left:" + leftX + ";width:" + eWidth +
"px;height:200px;background-color:#FFFFF9;overflow:auto;postion:absolute;z-index:1;'>"
+ data + "
");
}
},
eroor: function () {
alert("Error：連接服務(wù)器錯(cuò)誤！");
}
});
}
</script>
<style type="text/css">
ul li
{
list-style-type: none;
}
</style>
雖然大體的樣子出來(lái)了，還是需要處理一些事件，比如說(shuō)：鼠標(biāo)單擊事件，貫標(biāo)離開(kāi)文本框DIV消失事件
6、Remove或Hide剛才生成的
現(xiàn)在就用到了剛才生成<ul><li></li></ul>中的class屬性了，根據(jù)class屬性
設(shè)置<li></li>單擊事件，當(dāng)單擊時(shí)隱藏并把文本值賦值給事件源。
<script type="text/javascript"> $(document).ready(function () {
$("#txt_SOSO").keyup(function () {
autoPrompt($("#txt_SOSO"), $("#DIV_PANLE"));
});
$("#txt_SOSO").blur(function () {
setTimeout(function () { // 由于當(dāng)單擊li時(shí)blur事件先與單擊事件觸發(fā)，導(dǎo)致不能觸發(fā)click事件，顧此處用setTimeout設(shè)置延時(shí)觸發(fā)
$("#div_auto").remove();
}, 200);
});
});
/* AutoDropDownList實(shí)現(xiàn)
* event:觸發(fā)的事件源
* panle:AutoDropDownList顯示的位置
*/
function autoPrompt(event, panle) {
var topY = event.position().top; // 獲取事件源的Y坐標(biāo)
var leftX = event.position().left; // 獲取事件源的X坐標(biāo)
var eWidth = event.width(); // 獲取事件源的寬度
var eValue = event.val(); // 獲取事件源的Value
/* Ajax異步獲取數(shù)據(jù) */
$.ajax({
url: "AjaxHandleResult.ashx",
type: "POST",
data: { key: eValue },
success: function (data) {
if (data != null) {
// 創(chuàng)建一個(gè)，并設(shè)置必須的CSS
panle.append("<div id='div_auto'
style='top:" + topY + ";left:" + leftX + ";width:" + eWidth +
"px;height:200px;background-color:#FFFFF9;overflow:auto;postion:absolute;z-index:1;'>"
+ data + "
");
