瀏覽器支援jQuery程度

	IE8	FF3.*	Google7.*	Opera10.*
leadingWhitespace	false	true	true	true
tbody	false	true	true	true
htmlSerialize	false	true	true	true
style	false	true	true	true
hrefNormalized	false	true	true	true
opacity	false	true	true	true
cssFloat	false	true	true	true
checkOn	true	true	false	true
optSelected	false	true	true	true
optDisabled	true	true	true	true
checkClone	true	true	true	true
scriptEval	false	true	true	true
noCloneEvent	false	true	true	true
boxModel	true	true	true	true
inlineBlockNeedsLayout	true	false	false	false
shrinkWrapBlocks	false	false	false	false
reliableHiddenOffsets	false	true	true	true
submitBubbles	false	true	true	true
changeBubbles	false	true	true	true
ajax	true	true	true	true
資料取得於jQuery2010.10.27日

	true	false	Ex.
leadingWhitespace
tbody	當Talbe缺少tbody時自動補上	缺就給他缺完全不理會
htmlSerialize
style	getAttribute("style");可以完全取出物件的css屬性	不支援
hrefNormalized	當使用getAttribute（）取出href的Value時只會回傳屬性值，而不是回傳完整URL	會取出完整URL	請點button
opacity	可以直接使用css透明屬性opacity	IE替代方式filter:alpha(opacity=透明值(Number));
cssFloat	支援CSS的float屬性	不支援
checkOn
optSelected
optDisabled
checkClone
scriptEval
noCloneEvent
boxModel	完全支援W3C的CSS盒模型	不支援
inlineBlockNeedsLayout
inlineBlockNeedsLayout
shrinkWrapBlocks
reliableHiddenOffsets
submitBubbles
changeBubbles
ajax
資料取得於jQuery2010.10.27日

Autocomplete and ashx

Autocomplete.js

$(function(){
      var path = "Autocomplete.ashx";//連接位置       
      $( "#tags" ).autocomplete({
          source:function(request,response){
              $.ajax({
                  type:"POST",
                  url:path,
                  dataType:"text",
                  timeout:3000,//over 3000s exit
                  data:{"value":request.term,"type":"id"},
                  success:function(data, textStatus){
                      if(data == "")return response([]);
                      var aTemp = data.split(",");
                      response($.map(aTemp,function(n){
                          return{value:n}
                      }));
                  }
              });
          },
          delay:500,//輸入完畢延遲0.5秒
          minLength:1//最少輸入1字元
      });
});

Autocomplete.html

<div >
   <input type="text" id="tags" />
</div>

Autocomplete.ashx

Dim db As New intra.intraConn
Dim dt As DataTable
Dim SQL10, strID As String
Dim rows As DataRow
SQL10 = "Select top 10 id from StaffData WHERE " & context.Request("type") & " LIKE '" & context.Request("value") & "%'"
dt = db.GetDataTable(SQL10) ''連接資料庫取得dataTable
strID = ""
If Not dt.Rows.Count = 0 Then '檢查資料是否為null
    For Each rows In dt.Rows '一一取出
        If strID = "" Then
            strID = rows.Item("id").ToString
        Else
            strID = Trim(strID) & "," & rows.Item("id").ToString
        End If
    Next
End If
db.Close()
If Trim(strID) = "" Then
    context.Response.End()
End If
context.Response.ContentType = "text/plain"
context.Response.Write(Trim(strID)) '傳回字串

這是小弟的設計，大家參考看看，有感想歡迎提出

jQueryUI Autocomplete

jQueryUI真是太方便了，像這種欄位自動輸入，其實asp.net 的Ajax Tools其實也有，小弟也小玩過，但感覺想跳來jQuery原因就是~~，他實在方便又美觀，不廢話，小說明一下:

屬性:

soucer	來源
minLength	當輸入第幾字元時開始搜尋
delay	當資料較龐大時使用，其實設定0也可以，只是效果，自己判斷摟
Disables	(true)禁用(false)啟用 不設定也可以因為預設:false

事件:

select	選擇完畢觸發
open	選擇窗開啟時觸發
close	選擇窗關閉時觸發
focus	當focus在選擇欄位時觸發
change	輸入欄位值改變時觸發
search	搜尋之前觸發

方法:

.autocomplete( "destroy" )	直接移除掉自動搜尋功能
.autocomplete( "disable" )	自動輸入"禁用"
.autocomplete( "enable" )	自動輸入"啟用"
.autocomplete( "option" , optionName , [value] )	設定與獲得，無value時，就是獲得
.autocomplete( "option" , options )	options物件 一次設定多個指令
.autocomplete( "widget" )
.autocomplete( "search" , [value] )
.autocomplete( "close" )

javascript

$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

html

<label for="tags">Tags:</label>
<input id="tags">