返回列表 發帖

[jQuery] Autocomplete - 自動完成文字輸入

jQuery Autocomplete
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
輕鬆擁有自動完成的文字輸入框

使用方式

下載 jQuery Autocomplete 後,將 js 和 css 引用進來。
<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>

使用靜態資料的範例

這個 plugin 有兩種使用(取得)資料的方式,一種是直接使用 javascript array 的資料來做 autocomplete,另一種是使用 AJAX 去 server 端要資料。先看第一種方式的作法:
<input type="text" name="t1" id="t1" />
這是一個普通的文字輸入框,假設這是要給 user 輸入行政區的欄位,現有的資料已存在於 javascript 的程式中,可以再加入以下程式來達到 autocomplete 的功能:
  var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];
  $("#t1").autocomplete(data, {matchContains: true});
很簡單吧!試試看效果:




使用 AJAX 取得資料的範例

另一種方式是資料存放於 server 端,由 client 端即時向 server 端取得,適合資料量比較大的時候的處理方式。程式也相當簡單,原本指定的資料來源改為 server 端的一隻程式即可:
$("#t2").autocomplete('autocomplete.php');
client 端會將 user 輸入的值以 q 這個變數傳入,server 端只需要把資料以斷行隔開輸出即可,以下是一段 PHP 的範例:
<?php
$q = $_GET["q"];
if (!$q) return;
$data = array('台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區');
foreach ($data as $value) {
  if (strpos($value, $q) !== false) {
    echo $value."\n";
  }
}
?>
To infinity and beyond!

請教

var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];   
  $("#t1").autocomplete(data, {matchContains: true});  

這兩行是要擺在那裡呢?「 javascript 的程式中」是指那裡呢?我不了解這個意思,麻煩大大指導了。
謝謝

TOP

一般來說我會放到網頁的最後面,例如:
<html>
<body>
...
...
...
<script type="text/javascript">
$(function() {
  var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];   
  $("#t1").autocomplete(data, {matchContains: true});    
});
</script>
</body>
</html>
To infinity and beyond!

TOP

再次求助:

您好~~
      第一個方法己經試成功了,很感謝您的指導~~
      
     但我想試第二個方法,由於我是要寫成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字都沒有反應,可以再次麻煩您指導嗎?謝謝

TOP

有試過直接在瀏覽器輸入 supply_list.aspx?q=a 試試看嗎?

不知道是不是換行的問題:
Response.Write(data(i) & "\n")
To infinity and beyond!

TOP

己試過在網址上輸入q

有在網址上試過唷!
有值跑出來,但試著用textbox輸入就沒動作...
麻煩您教教我了

TOP

有值了~~
原來Textbox的id沒改成t2
抱歉!!!來亂了

TOP

可以再請問一下嗎

我試出來了~
但是我發現他的反應速度小小的慢....
還有就是明明選項沒有這麼多個,他的下拉式選單卻還是很多

有方法解決嗎?
謝謝

TOP

反應速度指的是輸入後,不會馬上出現下拉選單嗎?

有兩個因素影響下拉選單出現的速度,一個是透過參數 delay 來控制按鍵後的反應,預設是 400 msec (0.4 秒) ,您可以參考一下。不過由於透過網路傳輸資料,反應速度調太快未必會有幫助喔。delay 的設定值可由第二個參數傳入,例如:
$("#t2").autocomplete('supply_list.aspx', {delay: 100});  
另一個因素則是伺服器回傳的速度,不知道伺服器或網路的速度是否都正常呢?

至於「選項沒有這麼多個,他的下拉式選單卻還是很多」,不知道是什麼意思呢?
瀏覽器內輸入 supply_list.aspx?q=a  時的輸出項目都正常嗎?
To infinity and beyond!

TOP

可以顯現兩個結果嗎

就是像google和yahoo的搜尋一樣
找到的字靠左   而這個字的筆數靠右
有提供這個功能嗎

TOP

返回列表 回復 發帖