【JQuery】Autocomplete【自動完成】
使用JQuery前，需要引用Jquery元件。
自動完成(Autocomplete)功能方便於使用者輸入資料時，提示相關字眼，以節省時間與效率。
本篇介紹兩種常用方式，與ASP做結合，若要其他詳細功能請參考官網。
HTML 頁面(參考)︰
航空公司 <input id="tags" name="tags" type="text" />
方法一(直接產生List方式)
Javascript︰
<script type="text/javascript">
$(function () {
var availableTags = <%=TagList %>;
$('#tags').autocomplete({
source: availableTags, //資料來源
minLength: 0 //輸入最少字數
});
// 自動完成focus ; Click文字盒就顯示全部List
$('#tags').focus(function () {
if (this.value == "") {
$(this).autocomplete("search");
}
});
});
</script>
ASP(參考)︰
TagList=""
'Select GetAirline 全部
sqlstr = "Select Code_Desc1 From System_Code Where Status = 1 And UpLevelID = 'X12' ORDER BY LevelID "
set rs=Exec_Record(sqlstr)
if not rs.eof then
TagList="["
do while not rs.eof
TagList=TagList & """" & trim(rs("Code_Desc1")) & ""","
rs.movenext
loop
TagList=left(TagList,len(TagList)-1)
TagList=TagList & "]"
end if
rs.close : set rs = nothing
EX:TagList內容串成 JSON格式 為 ["中華航空","長榮航空","復興航空","華信航空","立榮航空","遠東航空"]
==================================================================================================
方法二(透過DataSource方式)
Javascript︰
<script type="text/javascript">
$(function () {
$('#tags').autocomplete({
source: "search.asp", //資料來源
minLength: 0 //輸入最少字數
});
// 自動完成focus ; Click文字盒就顯示全部List
$('#tags').focus(function () {
if (this.value == "") {
$(this).autocomplete("search");
}
});
});
</script>
ASP(參考)︰
Session.CodePage=65001
Response.CharSet="utf-8"
TagList=""
prefixText=request("term") '使用者輸入字串
'Select GetAirline 文字篩選
sqlstr = "Select Code_Desc1 From System_Code Where Status = 1 And UpLevelID = 'X12' " & _
" And (Code_Desc1 like '%" & prefixText & "%' or Code_Desc3 like '%" & prefixText & "%') ORDER BY LevelID"
set rs=Exec_Record(sqlstr)
if not rs.eof then
TagList="["
do while not rs.eof
TagList=TagList & """" & trim(rs("Code_Desc1")) & ""","
rs.movenext
loop
TagList=left(TagList,len(TagList)-1)
TagList=TagList & "]"
end if
rs.close : set rs = nothing
response.write TagList '輸出列表
執行畫面(點選文字盒)︰
執行畫面(輸入文字)︰
參考資源︰
jQuery UI 的自動完成器 autocomplete 測試
jQuery Autocomplete UI get source from asp page
jQuery Autocomplete 官網
留言
張貼留言