文本框自動匹配提示功能（JQuery-AJAX）主要思想：當文本框的值每次改變時都異步請求查詢數據並返回匹配結果。前臺頁面開始時放置一個ul，當異步請求到數據不爲空時，循環向ul中添加li標籤，並

時間 2019-11-11

標籤文本自動匹配提示功能 jquery ajax 主要思想每次改變異步請求查詢數據返回結果前臺頁面開始時放置一個不爲循環添加標籤欄目 JQuery 简体版

原文原文鏈接

2javascript

<%@ Page Language= "C#" AutoEventWireup= "true" CodeBehind= "TextAutoFinish.aspx.cs" Inherits= "jQuery.TextAutoFinish" %>

<!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= "js/jquery-1.4.2.js" type= "text/javascript" ></script>

<script src= "js/jquery-1.4.2-vsdoc.js" type= "text/javascript" ></script>

<script type= "text/javascript" >

function autoFinish() { //1

TheAshx = "TextSuggestion.ashx" ; //須要異步請求的頁面

var key = $( "#txt" ).val();

if (key.length > 0) { //若是文本框有文字才進行異步請求 2

$.post(TheAshx, { "keyword" : key }, function (data, status) { // 3

if (status == "success" ) { //4

var tipText = $.parseJSON(data);

var tipHtml = "" ; //拼接HTML標籤

//有返回結果才顯示

if (tipText.length <= 0) { $( "#tipText" ).hide(); return ; }

else $( "#tipText" ).show();

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

tipHtml += "<li>" + tipText[i] + "</li>" ;

}

var wid = parseInt($( "#txt" ).width());

var left = parseInt($( "#txt" ).offset().left);

var top = parseInt($( "#txt" ).offset().top);

var height = parseInt($( "#txt" ).height());

//將拼接好的html代碼顯示並設置ul的寬度始終與文本框同樣

$( "#tipText" ).html(tipHtml).width(wid);

//設置ul顯示位置始終處於文本框之下。

$( "#tipText" ).css( "position" , "relative" ).css( "left" , left - 10).css( "top" , top + height - 10);

$( function () { //5

$( "#tipText" ).addClass( "body" );

$( "#tipText li" ).mouseover( function () {

$( this ).css( "background" , "green" ).siblings( "li" ).css( "background" , "white" );

});

$( "#tipText li" ).click( function () {

$( "#tipText" ).hide();

$( "#txt" ).val($( this ).text());

});

}) //5

} //4

else {

alert( "AJAX錯誤" );

}

}); //3

} //2

} //1

</script>

<style type= "text/css" >

ul{ list-style-type : none ;}

.body{ border : 1px solid blue ;}

</style>

</ head >

< body >

< form id = "form1" runat = "server" >

< div >

< input type = "text" id = "txt" name = "txt" class = "txt" onkeyup = "autoFinish()"

style = "width:300px; position:absolute; top:50px; left:50px" />

< ul id = "tipText" style = "margin:0 0 0 0; padding:0 0 0 0; " ></ ul >

</ div >

</ form >

</ body >

</ html >

TextSuggestion.ashx 主要代碼：css

｛

string key = context.Request[ "keyword" ];

context.Response.ContentType = "text/plain" ;

List< string > list = getSuggestionDAL(key);

JavaScriptSerializer jss = new JavaScriptSerializer();

string strRes = jss.Serialize(list);

context.Response.Write(strRes);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

文本框自動匹配提示功能（JQuery-AJAX） 主要思想：當文本框的值每次改變時都異步請求查詢數據並返回匹配結果。 前臺頁面開始時放置一個ul，當異步請求到數據不爲空時，循環向ul中添加li標籤，並

文本框自動匹配提示功能（JQuery-AJAX）主要思想：當文本框的值每次改變時都異步請求查詢數據並返回匹配結果。前臺頁面開始時放置一個ul，當異步請求到數據不爲空時，循環向ul中添加li標籤，並