[jQuery] Autocomplete - 自動完成文字輸入
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] jQuery Autocomplete[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 輕鬆擁有自動完成的文字輸入框
[b][size=4][color=Indigo]使用方式[/color][/size][/b]
下載 jQuery Autocomplete 後，將 js 和 css 引用進來。
[code html]
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
[/code]
[b][/b]
[b][size=4][color=Indigo]使用靜態資料的範例[/color][/size][/b]
這個 plugin 有兩種使用(取得)資料的方式，一種是直接使用 javascript array 的資料來做 autocomplete，另一種是使用 AJAX 去 server 端要資料。先看第一種方式的作法：
[code html:nocontrols]
<input type="text" name="t1" id="t1" />
[/code]
這是一個普通的文字輸入框，假設這是要給 user 輸入行政區的欄位，現有的資料已存在於 javascript 的程式中，可以再加入以下程式來達到 autocomplete 的功能：
[code js:nocontrols]
var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];
$("#t1").autocomplete(data, {matchContains: true});
[/code]
很簡單吧！試試看效果：
[jsg.example]
<style type="text/css">
.ac_results {text-align: left;}
</style>
<label for="t1">請輸入台灣的行政區：</label><input type="text" name="t1" id="t1" value="台北" />
<link rel="stylesheet" type="text/css" href="_lib/jquery/plugins/jquery.autocomplete.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/jquery.autocomplete.pack.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(function() {
var data = ['台北市','台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區','台北市萬華區','台北市信義區','台北市士林區','台北市北投區','台北市內湖區','台北市南港區','台北市文山區','基隆市','基隆市仁愛區','基隆市信義區','基隆市中正區','基隆市中山區','基隆市安樂區','基隆市暖暖區','基隆市七堵區','台北縣','台北縣萬里鄉','台北縣金山鄉','台北縣板橋市','台北縣汐止市','台北縣深坑鄉','台北縣石碇鄉','台北縣瑞芳鎮','台北縣平溪鄉','台北縣雙溪鄉','台北縣貢寮鄉','台北縣新店市','台北縣坪林鄉','台北縣烏來鄉','台北縣永和市','台北縣中和市','台北縣土城市','台北縣三峽鎮','台北縣樹林市','台北縣鶯歌鎮','台北縣三重市','台北縣新莊市','台北縣泰山鄉','台北縣林口鄉','台北縣蘆洲市','台北縣五股鄉','台北縣八里鄉','台北縣淡水鎮','台北縣三芝鄉','台北縣石門鄉','宜蘭縣','宜蘭縣宜蘭市','宜蘭縣頭城鎮','宜蘭縣礁溪鄉','宜蘭縣壯圍鄉','宜蘭縣員山鄉','宜蘭縣羅東鎮','宜蘭縣三星鄉','宜蘭縣大同鄉','宜蘭縣五結鄉','宜蘭縣冬山鄉','宜蘭縣蘇澳鎮','宜蘭縣南澳鄉','桃園縣','桃園縣中壢市','桃園縣平鎮市','桃園縣龍潭鄉','桃園縣楊梅鎮','桃園縣新屋鄉','桃園縣觀音鄉','桃園縣桃園市','桃園縣龜山鄉','桃園縣八德市','桃園縣大溪鎮','桃園縣復興鄉','桃園縣大園鄉','桃園縣蘆竹鄉','新竹縣市','新竹縣市新竹市','新竹縣市竹北市','新竹縣市湖口鄉','新竹縣市新豐鄉','新竹縣市新埔鎮','新竹縣市關西鎮','新竹縣市芎林鄉','新竹縣市寶山鄉','新竹縣市竹東鎮','新竹縣市五峰鄉','新竹縣市橫山鄉','新竹縣市尖石鄉','新竹縣市北埔鄉','新竹縣市峨眉鄉','苗栗縣','苗栗縣竹南鎮','苗栗縣頭份鎮','苗栗縣三灣鄉','苗栗縣南庄鄉','苗栗縣獅潭鄉','苗栗縣後龍鎮','苗栗縣通霄鎮','苗栗縣苑裡鎮','苗栗縣苗栗市','苗栗縣造橋鄉','苗栗縣頭屋鄉','苗栗縣公館鄉','苗栗縣大湖鄉','苗栗縣泰安鄉','苗栗縣銅鑼鄉','苗栗縣三義鄉','苗栗縣西湖鄉','苗栗縣卓蘭鎮','台中市','台中市中區','台中市東區','台中市南區','台中市西區','台中市北區','台中市北屯區','台中市西屯區','台中市南屯區','台中縣','台中縣太平市','台中縣大里市','台中縣霧峰鄉','台中縣烏日鄉','台中縣豐原市','台中縣后里鄉','台中縣石岡鄉','台中縣東勢鎮','台中縣和平鄉','台中縣新社鄉','台中縣潭子鄉','台中縣大雅鄉','台中縣神岡鄉','台中縣大肚鄉','台中縣沙鹿鎮','台中縣龍井鄉','台中縣梧棲鎮','台中縣清水鎮','台中縣大甲鎮','台中縣外埔鄉','台中縣大安鄉','彰化縣','彰化縣彰化市','彰化縣芬園鄉','彰化縣花壇鄉','彰化縣秀水鄉','彰化縣鹿港鎮','彰化縣福興鄉','彰化縣線西鄉','彰化縣和美鎮','彰化縣伸港鄉','彰化縣員林鎮','彰化縣社頭鄉','彰化縣永靖鄉','彰化縣埔心鄉','彰化縣溪湖鎮','彰化縣大村鄉','彰化縣埔鹽鄉','彰化縣田中鎮','彰化縣北斗鎮','彰化縣田尾鄉','彰化縣埤頭鄉','彰化縣溪州鄉','彰化縣竹塘鄉','彰化縣二林鎮','彰化縣大城鄉','彰化縣芳苑鄉','彰化縣二水鄉','南投縣','南投縣南投市','南投縣中寮鄉','南投縣草屯鎮','南投縣國姓鄉','南投縣埔里鎮','南投縣仁愛鄉','南投縣名間鄉','南投縣集集鎮','南投縣水里鄉','南投縣魚池鄉','南投縣信義鄉','南投縣竹山鎮','南投縣鹿谷鄉','雲林縣','雲林縣斗南鎮','雲林縣大埤鄉','雲林縣虎尾鎮','雲林縣土庫鎮','雲林縣褒忠鄉','雲林縣東勢鄉','雲林縣台西鄉','雲林縣崙背鄉','雲林縣麥寮鄉','雲林縣斗六市','雲林縣林內鄉','雲林縣古坑鄉','雲林縣莿桐鄉','雲林縣西螺鎮','雲林縣二崙鄉','雲林縣北港鎮','雲林縣水林鄉','雲林縣口湖鄉','雲林縣四湖鄉','雲林縣元長鄉','嘉義縣市','嘉義縣市嘉義市','嘉義縣市番路鄉','嘉義縣市梅山鄉','嘉義縣市竹崎鄉','嘉義縣市阿里山鄉','嘉義縣市中埔鄉','嘉義縣市大埔鄉','嘉義縣市水上鄉','嘉義縣市鹿草鄉','嘉義縣市太保市','嘉義縣市朴子市','嘉義縣市東石鄉','嘉義縣市六腳鄉','嘉義縣市新港鄉','嘉義縣市民雄鄉','嘉義縣市大林鎮','嘉義縣市溪口鄉','嘉義縣市義竹鄉','嘉義縣市布袋鎮','台南市','台南市中西區','台南市東區','台南市南區','台南市北區','台南市安平區','台南市安南區','台南縣','台南縣永康市','台南縣歸仁鄉','台南縣新化鎮','台南縣左鎮鄉','台南縣玉井鄉','台南縣楠西鄉','台南縣南化鄉','台南縣仁德鄉','台南縣關廟鄉','台南縣龍崎鄉','台南縣官田鄉','台南縣麻豆鎮','台南縣佳里鎮','台南縣西港鄉','台南縣七股鄉','台南縣將軍鄉','台南縣學甲鎮','台南縣北門鄉','台南縣新營市','台南縣後壁鄉','台南縣白河鎮','台南縣東山鄉','台南縣六甲鄉','台南縣下營鄉','台南縣柳營鄉','台南縣鹽水鎮','台南縣善化鎮','台南縣大內鄉','台南縣山上鄉','台南縣新市鄉','台南縣安定鄉','高雄市','高雄市新興區','高雄市前金區','高雄市苓雅區','高雄市鹽埕區','高雄市鼓山區','高雄市旗津區','高雄市前鎮區','高雄市三民區','高雄市楠梓區','高雄市小港區','高雄市左營區','高雄縣','高雄縣仁武鄉','高雄縣大社鄉','高雄縣岡山鎮','高雄縣路竹鄉','高雄縣阿蓮鄉','高雄縣田寮鄉','高雄縣燕巢鄉','高雄縣橋頭鄉','高雄縣梓官鄉','高雄縣彌陀鄉','高雄縣永安鄉','高雄縣湖內鄉','高雄縣鳳山市','高雄縣大寮鄉','高雄縣林園鄉','高雄縣鳥松鄉','高雄縣大樹鄉','高雄縣旗山鎮','高雄縣美濃鎮','高雄縣六龜鄉','高雄縣內門鄉','高雄縣杉林鄉','高雄縣甲仙鄉','高雄縣桃源鄉','高雄縣那瑪夏鄉','高雄縣茂林鄉','高雄縣茄萣鄉','澎湖縣','澎湖縣馬公市','澎湖縣西嶼鄉','澎湖縣望安鄉','澎湖縣七美鄉','澎湖縣白沙鄉','澎湖縣湖西鄉','屏東縣','屏東縣屏東市','屏東縣三地門鄉','屏東縣霧台鄉','屏東縣瑪家鄉','屏東縣九如鄉','屏東縣里港鄉','屏東縣高樹鄉','屏東縣鹽埔鄉','屏東縣長治鄉','屏東縣麟洛鄉','屏東縣竹田鄉','屏東縣內埔鄉','屏東縣萬丹鄉','屏東縣潮州鎮','屏東縣泰武鄉','屏東縣來義鄉','屏東縣萬巒鄉','屏東縣崁頂鄉','屏東縣新埤鄉','屏東縣南州鄉','屏東縣林邊鄉','屏東縣東港鎮','屏東縣琉球鄉','屏東縣佳冬鄉','屏東縣新園鄉','屏東縣枋寮鄉','屏東縣枋山鄉','屏東縣春日鄉','屏東縣獅子鄉','屏東縣車城鄉','屏東縣牡丹鄉','屏東縣恆春鎮','屏東縣滿州鄉','台東縣','台東縣台東市','台東縣綠島鄉','台東縣蘭嶼鄉','台東縣延平鄉','台東縣卑南鄉','台東縣鹿野鄉','台東縣關山鎮','台東縣海端鄉','台東縣池上鄉','台東縣東河鄉','台東縣成功鎮','台東縣長濱鄉','台東縣太麻里鄉','台東縣金峰鄉','台東縣大武鄉','台東縣達仁鄉','花蓮縣','花蓮縣花蓮市','花蓮縣新城鄉','花蓮縣秀林鄉','花蓮縣吉安鄉','花蓮縣壽豐鄉','花蓮縣鳳林鎮','花蓮縣光復鄉','花蓮縣豐濱鄉','花蓮縣瑞穗鄉','花蓮縣萬榮鄉','花蓮縣玉里鎮','花蓮縣卓溪鄉','花蓮縣富里鄉','金門連江','金門連江金沙鎮','金門連江金湖鎮','金門連江金寧鄉','金門連江金城鎮','金門連江烈嶼鄉','金門連江烏坵鄉','金門連江南竿','金門連江北竿','金門連江莒光','金門連江東引','金門連江釣魚台'];
$j("#t1").autocomplete(data, {matchContains: true});
});
</script>
[/jsg.example]
[b][/b]
[b][size=4][color=Indigo]使用 AJAX 取得資料的範例[/color][/size][/b]
另一種方式是資料存放於 server 端，由 client 端即時向 server 端取得，適合資料量比較大的時候的處理方式。程式也相當簡單，原本指定的資料來源改為 server 端的一隻程式即可：
[code js:nocontrols]
$("#t2").autocomplete('autocomplete.php');
[/code]
client 端會將 user 輸入的值以 q 這個變數傳入，server 端只需要把資料以斷行隔開輸出即可，以下是一段 PHP 的範例：
[code php]
<?php
$q = $_GET["q"];
if (!$q) return;
$data = array('台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區');
foreach ($data as $value) {
if (strpos($value, $q) !== false) {
echo $value."\n";
}
}
?>
[/code]
請教
var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];$("#t1").autocomplete(data, {matchContains: true});
這兩行是要擺在那裡呢?「 javascript 的程式中」是指那裡呢?我不了解這個意思，麻煩大大指導了。
謝謝:L 一般來說我會放到網頁的最後面，例如：
[code html]
<html>
<body>
...
...
...
<script type="text/javascript">
$(function() {
var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];
$("#t1").autocomplete(data, {matchContains: true});
});
</script>
</body>
</html>
[/code]
再次求助:
您好~~第一個方法己經試成功了，很感謝您的指導~~
但我想試第二個方法，由於我是要寫成asp.net的，所以我改成以下的程式碼
<script type="text/javascript">
$("#t2").autocomplete('supply_list.aspx');
</script>
suppy_list.aspx的程式
Dim q As String
Dim data() As String
ReDim data(4)
Dim check_str, i As Integer
q = Request.QueryString("q") '$q = $_GET["q"];
data(0) = "aa1"
data(1) = "aa2"
data(2) = "ab2"
data(3) = "ab1"
data(4) = "ac"
If q = "" Then
For i = 0 To (data.Length - 1)
Response.Write(data(i) & "/n")
Next
Else
For i = 0 To (data.Length - 1)
' Response.Write(data(i) & "__<BR>")
check_str = data(i).IndexOf(q)
Response.Write(check_str & "__<BR>")
If check_str <> -1 Then
Response.Write(data(i) & "/n")
End If
Next
End If
但是在Textbox裡key字都沒有反應，可以再次麻煩您指導嗎?謝謝 有試過直接在瀏覽器輸入 supply_list.aspx?q=a 試試看嗎？
不知道是不是換行的問題：
[code vb]
Response.Write(data(i) & "\n")
[/code]
己試過在網址上輸入q
有在網址上試過唷!有值跑出來，但試著用textbox輸入就沒動作...
麻煩您教教我了
哈
有值了~~原來Textbox的id沒改成t2
抱歉!!!來亂了:L
可以再請問一下嗎
我試出來了~但是我發現他的反應速度小小的慢....
還有就是明明選項沒有這麼多個，他的下拉式選單卻還是很多
有方法解決嗎?
謝謝 反應速度指的是輸入後，不會馬上出現下拉選單嗎？
有兩個因素影響下拉選單出現的速度，一個是透過參數 delay 來控制按鍵後的反應，預設是 400 msec (0.4 秒) ，您可以參考一下。不過由於透過網路傳輸資料，反應速度調太快未必會有幫助喔。delay 的設定值可由第二個參數傳入，例如：
[code js]
$("#t2").autocomplete('supply_list.aspx', {delay: 100});
[/code]
另一個因素則是伺服器回傳的速度，不知道伺服器或網路的速度是否都正常呢？
至於「選項沒有這麼多個，他的下拉式選單卻還是很多」，不知道是什麼意思呢？
瀏覽器內輸入 supply_list.aspx?q=a 時的輸出項目都正常嗎？
可以顯現兩個結果嗎
就是像google和yahoo的搜尋一樣找到的字靠左 而這個字的筆數靠右
有提供這個功能嗎 我看了一下官方的 demo 頁面有類似的
[url]http://jquery.bassistance.de/autocomplete/demo/[/url]
可參考 E-Mail (local) 那一欄的作法：[code]$("#suggest13").autocomplete(emails, {
minChars: 0,
width: 310,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
},
formatMatch: function(row, i, max) {
return row.name + " " + row.to;
},
formatResult: function(row) {
return row.to;
}
});[/code] 感覺他只是再回傳訊息 加幾個字
沒有值是靠左
然後結果數是靠右 呈現的方式應該可以在 formatItem 這邊處理，要讓值靠左、結果靠右就寫在這裡面。
我的光第一種簡單的就沒反應耶..
<input type="text" name="t1" id="t1" /><script type="text/javascript">
$(function() {
alert()
var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];
$("#t1").autocomplete(data, {matchContains: true});
});
</script>
都沒反應...是不是哪少了...
可以了...
我少了一個jquery 的js :lol 歡迎常來逛逛 :)回復 1# 的帖子
請問在上面的例子中有用ASP.NET 的作法實現"自動完成文字輸入"我在"Default4.aspx"網頁中 <HEAD>區段寫入下面代碼.
<head runat="server">
<script type="text/javascript">
$("#t1").autocomplete('Default4.aspx');
</script>
</head>
問題:
1>.我在Default4.vb要如何改寫呢?
2>.在"Default4.aspx"中要寫接收的副程式嗎?如何將目前頁面資料傳到後端處理?
以上 煩請指導...
我的有問題！可以幫忙一下嗎？
dear all,可以幫忙看一下嗎？我的都沒有反應，也沒有錯誤訊息，是怎麼了？
程式在如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
</head>
<body>
<input type="text" name="t1" id="t1" />
<script type="text/javascript">
$(function() {
var data = ['aaa','aaaaa','aabbb','aaccc','dddd'];
$("#t1").autocomplete(data, {
minChars: 0,
width: 310,
matchContains: true,
autoFill: false
});
alert("over here");
});
</script>
</body>
</html> [quote]原帖由 [i]terry.lin[/i] 於 2009-2-4 17:26 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=297&ptid=114][img]http://jsgears.com/images/common/back.gif[/img][/url]
可以幫忙看一下嗎？我的都沒有反應，也沒有錯誤訊息，是怎麼了？
[/quote]
你的程式可能要注意:
1. jQuery 有重複引用了, 只需要引用一次即可
2. autocomplete 這個 js 檔是否存在
其他的部份看起來沒有問題喔 [quote]原帖由 [i]liaoost[/i] 於 2009-2-4 11:52 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=296&ptid=114][img]http://jsgears.com/images/common/back.gif[/img][/url]
請問在上面的例子中有用ASP.NET 的作法實現"自動完成文字輸入"
我在"Default4.aspx"網頁中 區段寫入下面代碼.[/quote]
你要用這段 javascript 的話，得先引用 jquery 和 autocompelete 兩個 js，另外還有一個 css。
引用之後，這一段 javascript 則要等到整個 page load 進來後才能去呼叫。
你可以參考你那篇 post 底下的另一篇，那一篇裡面就有一個完整的範例。
若是對 jQuery 還不太熟悉的話，可以參考[[url=http://jsgears.com/thread-63-1-1.html]jQuery 教學 - 基礎篇[/url]]的說明。
都完成之後呢，就可以再繼續 server 端的部份，如果你要在同一隻 aspx 內使用的話，就得改用帶參數的方式進去，並且把程式寫在 Page_Load() 裡面。
.aspx 要改成這樣：
[code js]
$("#t1").autocomplete('Default4.aspx?doQuery=1');
[/code]
.vb 內會有這樣一段：
[code vb]
Sub Page_Load()
If Request("doQuery") = "1" Then
'這邊就用一個選項換一行的方式輸出資料吧
End If
Response.End()
End Sub
[/code]
大致如上，請試試看吧