Board logo

標題: [jQuery] Autocomplete - 自動完成文字輸入 [打印本頁]

作者: wmh    時間: 2008-9-28 18:29     標題: [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});
很簡單吧!試試看效果:

[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]


使用 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";
  }
}
?>

作者: rubytone    時間: 2008-10-14 09:07     標題: 請教

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

這兩行是要擺在那裡呢?「 javascript 的程式中」是指那裡呢?我不了解這個意思,麻煩大大指導了。
謝謝
作者: wmh    時間: 2008-10-14 13:47

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

作者: rubytone    時間: 2008-10-16 10:27     標題: 再次求助:

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

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

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

作者: rubytone    時間: 2008-10-16 13:00     標題: 己試過在網址上輸入q

有在網址上試過唷!
有值跑出來,但試著用textbox輸入就沒動作...
麻煩您教教我了
作者: rubytone    時間: 2008-10-16 13:05     標題:

有值了~~
原來Textbox的id沒改成t2
抱歉!!!來亂了
作者: rubytone    時間: 2008-10-16 13:59     標題: 可以再請問一下嗎

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

有方法解決嗎?
謝謝
作者: wmh    時間: 2008-10-17 00:54

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

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

至於「選項沒有這麼多個,他的下拉式選單卻還是很多」,不知道是什麼意思呢?
瀏覽器內輸入 supply_list.aspx?q=a  時的輸出項目都正常嗎?
作者: hpbrother    時間: 2008-10-23 01:55     標題: 可以顯現兩個結果嗎

就是像google和yahoo的搜尋一樣
找到的字靠左   而這個字的筆數靠右
有提供這個功能嗎
作者: wmh    時間: 2008-10-23 20:02

我看了一下官方的 demo 頁面有類似的
http://jquery.bassistance.de/autocomplete/demo/

可參考 E-Mail (local) 那一欄的作法:
$("#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;
  }
});

作者: hpbrother    時間: 2008-10-27 15:00

感覺他只是再回傳訊息 加幾個字
沒有值是靠左
然後結果數是靠右
作者: wmh    時間: 2008-10-27 15:19

呈現的方式應該可以在 formatItem 這邊處理,要讓值靠左、結果靠右就寫在這裡面。
作者: bensonwu0107    時間: 2008-10-29 16:25     標題: 我的光第一種簡單的就沒反應耶..

<input type="text" name="t1" id="t1" />
<script type="text/javascript">  
$(function() {  
        alert()
  var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];      
  $("#t1").autocomplete(data, {matchContains: true});      
});  
</script>

都沒反應...是不是哪少了...
作者: bensonwu0107    時間: 2008-10-29 16:33     標題: 可以了...

我少了一個jquery 的js
作者: wmh    時間: 2008-10-29 23:20

歡迎常來逛逛
作者: liaoost    時間: 2009-2-4 11:52     標題: 回復 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"中要寫接收的副程式嗎?如何將目前頁面資料傳到後端處理?
以上 煩請指導...
作者: terry.lin    時間: 2009-2-4 17:26     標題: 我的有問題!可以幫忙一下嗎?

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>
作者: wmh    時間: 2009-2-4 20:57

原帖由 terry.lin 於 2009-2-4 17:26 發表
可以幫忙看一下嗎?我的都沒有反應,也沒有錯誤訊息,是怎麼了?


你的程式可能要注意:
1. jQuery 有重複引用了, 只需要引用一次即可
2. autocomplete 這個 js 檔是否存在

其他的部份看起來沒有問題喔
作者: wmh    時間: 2009-2-4 22:09

原帖由 liaoost 於 2009-2-4 11:52 發表
請問在上面的例子中有用ASP.NET 的作法實現"自動完成文字輸入"
我在"Default4.aspx"網頁中 區段寫入下面代碼.


你要用這段 javascript 的話,得先引用 jquery 和 autocompelete 兩個 js,另外還有一個 css。
引用之後,這一段 javascript 則要等到整個 page load 進來後才能去呼叫。
你可以參考你那篇 post 底下的另一篇,那一篇裡面就有一個完整的範例。
若是對 jQuery 還不太熟悉的話,可以參考[jQuery 教學 - 基礎篇]的說明。

都完成之後呢,就可以再繼續 server 端的部份,如果你要在同一隻 aspx 內使用的話,就得改用帶參數的方式進去,並且把程式寫在 Page_Load() 裡面。

.aspx 要改成這樣:
$("#t1").autocomplete('Default4.aspx?doQuery=1');
.vb 內會有這樣一段:
Sub Page_Load()
  If Request("doQuery") = "1" Then
    '這邊就用一個選項換一行的方式輸出資料吧
  End If
  Response.End()
End Sub
大致如上,請試試看吧
作者: terry.lin    時間: 2009-2-5 14:35     標題: 回復 19# 的帖子

不好意思,我又遇到問題了,
我在weblogic server 8.1 上,是不能work的,
但是在其他的Ap server 上又可以正常運作,
不知道有沒有方式可以解決這個問題?
作者: wmh    時間: 2009-2-5 19:56

你那一頁基本上都是純 client 端的程式,與 server 完全無關喔。

會不會是少了某個檔案造成的?
作者: terry.lin    時間: 2009-2-5 22:32     標題: 回復 22# 的帖子

dear whm,
我找到問題了,
在weblogic 8.1上好像是不支援EL表達式,把那個拿掉就可以了,
再次感謝您!謝謝。
作者: wmh    時間: 2009-2-5 22:37

我是 wmh
作者: terry.lin    時間: 2009-2-9 18:13

原帖由 wmh 於 2009-2-5 22:37 發表
我是 wmh

sorry, wmh,
我又遇到一個小問題,試了好久,還是沒有成功,可以點我一下嗎?
function formatItem是正常的,可以出現row[0]+" "+row[1]+" "+row[2]的資料,
但是function formatResult卻還是一樣只出現row[0]的資料而已,麻煩幫我看一下,謝謝。
我的每一個資料格式如下:
品名 | 產地 | 價錢

                            var contextRoot= "http://localhost:7001/Stamper";
                        
                        $(function(){   
                        $("#t1").autocomplete(contextRoot+'/GoodServlet',
                        {
                        delay:100,
                        width:200,
                        minChars:3,
                        autoFill:false,
                        maxItemsToShow:10,
                        formatItem: function(row, i, max) {
                        return row[0]+" "+row[1]+" "+row[2] ;
                        },
                        formatResult: function(row){
                        return row[0]+" "+row[1] ;
                        }
                        })   
                        });
作者: wmh    時間: 2009-2-9 22:12

我測試結果是沒問題的耶,我直接用你的那一組設定,formatResult() 是可以正常運作的。
作者: terry.lin    時間: 2009-2-9 23:24     標題: 回復 26# 的帖子

謝謝回復,那我再找看看是什麼問題好了,感謝!
作者: terry.lin    時間: 2009-2-12 14:29     標題: 回復 26# 的帖子

原來是js版本的問題,害我弄了好久~~
能否再請較一下,當我輸入了一個字後,從autocomplete所回傳的清單中點選一個值,然後我要去做某件事,這是要用什麼function啊?
作者: wmh    時間: 2009-2-12 21:48

我看官方網站的範例中,可以針對原本那個輸入框加上 result() 事件的處理:
  $("#t1").result(function(event, data, formatted) {
    //這邊是你要處理的事情, ex:
    alert('你選擇了' + $(this).val());
  });

作者: terry.lin    時間: 2009-2-13 12:16     標題: 回復 29# 的帖子

Dear wmh,
真是感謝您,open source就是要有你這種人才會愈來愈進步,謝謝。
作者: wmh    時間: 2009-2-13 12:27

Dear terry,
您真是太誇張了啦

open source就是要有你這種人熱心參與才會愈來愈進步,謝謝
作者: liaoost    時間: 2009-2-20 10:37

wmh~
請問如果我要實作 Server Control 元件 +jQuery 來完成 Autocomplete.
不透過Ajax,只用 ICallbackEventHandler 來完成.
要如何下手呢?

以上 謝謝
作者: wmh    時間: 2009-2-20 11:59

ICallbackEventHandler 應該是要配合特定控制項,這樣就不適合再用 jQuery 的 AutoComplete Plugin 了

如果用 jQuery 的 AutoComplete Plugin 的話,Server 端只需要做查詢、輸出,很單純的。
作者: liaoost    時間: 2009-2-20 14:48

目前我的Sever 端可以回傳資料到 Client 端. 回傳格式:["台北市","台北市士林區","台北市大同區","台北市大安區"]
而我用下面的 javascript 去接收回傳資料.
$("#TBTextBoxAutoComplete1").autocomplete(data); 必須將滑鼠點到其它地方後在點回輸入框值才會出現.(好像要讓它失焦).

<script type="text/javascript">  
  function ReceiveServerData(rValue) {
    var data = eval ("(" + rValue + ")");   
    $("#TBTextBoxAutoComplete1").autocomplete(data);
  };
</script>
作者: wmh    時間: 2009-2-20 23:19

我猜你可能用錯了方法
$("#TBTextBoxAutoComplete1").autocomplete(data);
這一段是一個初始化的動作,只需要做一次,TBTextBoxAutoComplete1 這個輸入框就可以有了 autocomplete 的功能。

而你寫在 ReceiveServerData() 內,應該是某個動作執行完成後就會觸發,這時是做 autocomplete 的初始化,而非 autocomplete 的篩選動作,所以沒有達到你想要的功能。
作者: liaoost    時間: 2009-2-23 14:08

您好:
$("#TBTextBoxAutoComplete1").autocomplete(data);  
初始化的動作,只要做一次,那它觸發是由原先jQuery已幫它寫好.
那是否表示,變數data一開始也被寫入了呢?
那請問有辨法動態更改Client 端原先data變數內的值嗎?
以上 謝謝.

[ 本帖最後由 liaoost 於 2009-2-23 15:41 編輯 ]
作者: wmh    時間: 2009-2-23 21:13

你需要的應該是透過 Server 端更新資料:
$("#TBTextBoxAutoComplete1").autocomplete('somwhere.aspx');
改成這樣寫,client 端 user 輸入了一些字串後,會用 q 這個變數傳到 somewhere.aspx,
somewhere.aspx 需要做的就是篩選資料,並且以一行一行的方式輸出資料。
作者: liaoost    時間: 2009-2-24 09:56

謝謝您的指導,我在試看看.
作者: liaoost    時間: 2009-2-27 16:02

wmh~
我大致上已實作完成. 謝謝你的指導... ~^.^~
請參考 http://www.dotblogs.com.tw/kinyo1978/archive/2009/02/27/7315.aspx
作者: wmh    時間: 2009-2-27 17:54

不錯喔,改了那麼多 autocomplete 的 code,應該是花了不少時間研究

我應該是沒有幫到什麼,不過非常歡迎你來這邊分享心得喔。
作者: bau720123    時間: 2009-3-10 12:24

各位大大好
我最近也在研究這個MOD
我的實驗環境
PHP+MYSQL(全採UTF-8編碼)

方法一(寫死)
在HTML的陣列裡面取資料

方法二(寫死)
透過AJAX取得你的動態檔案(php..asp..)
(但實際上還是把HTML的陣列資料放到php..asp..檔案而已)

方法三(自創)(從資料庫取得資料)
目前我碰到一些問題--假設資料庫有下列5筆資料
a許功蓋
a許不蓋
a許大概
許功蓋
許小蓋

當我在文字框中輸入a時--會出現(開頭是英文都沒問題)
a許功蓋
a許不蓋
a許大概
讓我選取--當選娶某一個值時--pop警告視窗也會說我抓到了正確的值

但(開頭是中文就會有問題)
當我打'許'而已時--卻不會出現
許功蓋
許小蓋
讓我選取--取而代之的是錯誤訊息Illegal mix of collations (utf8_general_ci,IMPLICIT) and (big5_chinese_ci,COERCIBLE) for operation 'like'
很明顯這是編碼錯誤造成欄位資料無法匹配的問題--有兩個解決辦法
方法A:將資料庫中匹配欄位的那個屬性改成big5_chinese_ci(utf8_general_ci是我原來的)
方法B:將
var url = options.url + "?q=" + encodeURI(q);
url += "&" + i + "=" + encodeURI(options.extraParams);
分別改成
var url = options.url + "?q=" + escape(q);
url += "&" + i + "=" + escape(options.extraParams);
就不會出現上述問題

這次我再打'許'或任何開頭中文的字--少了錯誤訊息--但還是沒出現應該要出現的選項--什麼都沒發生
請問有沒有人有這方面的相關實例
希望各位多指教
作者: wmh    時間: 2009-3-10 12:58

看起來是資料庫編碼的問題,和 jQuery 無關。
如果都是 utf-8 的編碼,應該不會有上述的問題,你可以試著先在 server 端的 php 程式把正確的資料撈出來後,再來套前端的 UI。

你去資料庫撈資料的語法是自己寫的嗎?
會不會在開啟資料庫連線後忘了指定編碼:
mysql_query('SET NAMES utf8');

作者: bau720123    時間: 2009-3-10 13:45

是的
全部都是utf-8編碼
mysql_query('SET NAMES big5' );
mysql_query("SET NAMES utf8' );
我都試過了--不過都是一樣的狀況
我可否把我的檔案跟資料庫結構傳一份給您
您幫我看看好嗎
因為我研究真的研究了很久了
就是中文首字問題沒法解決
如果可以的話--看是傳MAIL或是連結都可^^||

DEMO網址如下
http://59.124.2.38/autocomplete/autocomplete.html

[ 本帖最後由 bau720123 於 2009-3-10 15:05 編輯 ]
作者: wmh    時間: 2009-3-10 20:19

ok 你可以用網頁最下面的「聯繫我們 」的 email,或是你把檔案放到某個地方,再用「發短消息」的功能傳送給我即可,我會試著幫你看一下問題在哪。
作者: bau720123    時間: 2009-3-10 20:34

信件已寄出
內有完整使用說明
輸入資料時
可以隨便打a or c or d or 包 or 許
等字串
現在英文是OK的~中文就如您所知到的狀況一樣
再次感謝
作者: wmh    時間: 2009-3-10 21:12

我發現資料傳到 server 端會被編碼,
許功蓋會變成 "%u8A31%u529F%u84CB" 的字串,
所以要再用以下的方式取為原字串:
$q = join('', json_decode('["'. strtr($_GET['q'], '%u', '\u') . '"]'));

作者: bau720123    時間: 2009-3-11 12:17

目前我把網頁也變成了UTF-8
php,ini裡面也設定default_charset = "UTF-8"
以下是在不同的程式語法下測試的狀況
也麻煩您再幫我看一次
測試環境--自己電腦上的瀏覽器(IE跟FF)

您的意思是說把
$q = strtolower($_GET["q"]);
替換成
$q = join('', json_decode('["'. strtr($_GET['q'], '%u', '\u') . '"]'));


但結果在伺服器上沒什麼變化ㄟ
我準備了兩個版本
autocomplete_ajax.php是沿用原來的$q = strtolower($_GET["q"]);
autocomplete_ajax1.php是沿用新的$q = join('', json_decode('["'. strtr($_GET['q'], '%u', '\u') . '"]'));

包=
http://59.124.2.38/autocomplete/autocomplete_ajax.php?q=包
http://59.124.2.38/autocomplete/autocomplete_ajax.php?q=%A5]
http://59.124.2.38/autocomplete/autocomplete_ajax1.php?q=包
http://59.124.2.38/autocomplete/autocomplete_ajax1.php?q=%A5]

許=
http://59.124.2.38/autocomplete/autocomplete_ajax.php?q=許
http://59.124.2.38/autocomplete/autocomplete_ajax.php?q=%B3\
http://59.124.2.38/autocomplete/autocomplete_ajax1.php?q=許
http://59.124.2.38/autocomplete/autocomplete_ajax1.php?q=%B3\

前台測試網址
http://59.124.2.38/autocomplete/autocomplete.html
http://59.124.2.38/autocomplete/autocomplete1.html

[ 本帖最後由 bau720123 於 2009-3-11 12:27 編輯 ]
作者: wmh    時間: 2009-3-11 21:21

我把我目前可運作的程式完整寄回給你看看。
所有的檔案資料都以 UTF-8 來做,
包含你原本的 autocomplete.html 也轉成 UTF-8 編碼。
作者: bau720123    時間: 2009-3-12 10:51

我收到您的來信了
真的可以執行了
中文首字偵測也沒問題
我大概知道我哪些地方跟您這個版本設定的不一樣之處了
最後一個小問題希望您能給我一些建議

像打英文時--比方'a'--打完的那一剎那它自己會感應出應對的資料
但中文似乎有點兩光--比方打完'包'時--資料不會立即出來
這時要鍵盤上的方向鍵左或右動一下--這時才會感應出應對的資料
這跟字元碼有什麼相關的因素影響嗎???
希望能聽聽看您的看法跟建議
然後我再朝那個方向先自行去研究
真的不行時再上來論壇請教
再次謝謝您

PS
後記
後來我發現這個狀況目前在FF才會有這樣的狀況
IE我的版本是6是會立即自動感應的

[ 本帖最後由 bau720123 於 2009-3-12 11:35 編輯 ]
作者: wmh    時間: 2009-3-12 13:12

中文輸入的部份,可能和輸入法有關係喔,我這邊看起來是都還蠻順的,不會需要左右鍵動一下才出現資料。我是用酷音和雅虎奇摩輸入法,兩個都正常。
作者: wmh    時間: 2009-3-14 15:39

很明顯啊,你的問題出在輸入時不是用 \n 換行,而是用 html 的 <br/> 換行:
Response.Write(data[a] + "<br/>");
上面這一行應該改成:
Response.Write(data[a] + "\n");

作者: bau720123    時間: 2009-3-16 13:14

了解謝謝您低說明
再次感謝
作者: jordenno    時間: 2009-3-16 13:29     標題: 使用JSP提供資料

大大你好,我是用JSP提供資料
JSP檔如下程式碼

接收頁可以顯示資料沒問題
但當我在輸入框輸入 a 時
應該是只有出現2個選項
不過卻四個選項都出來了
繼續再輸入 b
又變成只剩一個選項了(abc)
有人用jsp來提供資料,有問題的嗎??
<%@ page contentType="text/html; charset=big5" language="java" errorPage="" %>
<%
         out.print("abc\n");
         out.print("babc\n");
         out.print("cabc\n");
         out.print("aabc\n");        
%>

作者: wmh    時間: 2009-3-16 16:42

server 端用哪種語言應該都不是問題喔,只要正確地將資料一行一行輸出即可。

你要貼出比較完整的程式碼嗎?上面這一段看不太出來問題在哪。
作者: redapple_pj    時間: 2009-4-11 16:02     標題: 管理员,这个问题怎么解决呀?一直没搞好

按照jquery中的实例做的,jsp页面中的javascript上:
$().ready(function() {
      $("#home_address").autocomplete('getJdtype.do', {
                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;
                }
        });
}
控制器中:
public void getJdtype(HttpServletRequest request,
                        HttpServletResponse response) throws Exception {
                String parent = request.getParameter("q");
                //int count=0;
                String str = "";
                List<Map> list;
                
                if(StringUtils.isBlank(parent)){
                        //count=0;
                        //str=String.valueOf(count);
                        return;
                }else{
                        list = getTDkindByTG(Integer.valueOf(parent));
                        //count=list.size();
                        //str=String.valueOf(count);
                        for(Map map :list){
                                String name=String.valueOf(map.get("kindremark"));
                                String id=String.valueOf(map.get("acceptdkindid"));
                                str += "{ name: \""+name+"\", to: \""+id+"\" },\n";
                        }
                }
                str = "[" + str + "]";
                System.out.println(str);
                response.setContentType("text/html;charset=UTF-8");
                response.setHeader("Cache-Control", "no-cache");
                response.getWriter().write(str);
        }
页面显示部分,总是提示“undefined”
我在页面中直接调试http://localhost:8088/project/getJdtype.do?q=4
显示的内容为:
[{ name: "催促揽", to: "13" }, { name: "催送发票(底单)", to: "38" }, { name: "催送单", to: "39" }, { name: "(底单)", to: "43" }, ]

是不是要显示成数组形式,而不是字符串呢,但动态数组不知道各位是如何实现的。盼。。。。。。
作者: wmh    時間: 2009-4-12 00:05

我看了一下實做的內容,有兩個地方需要調整,第一個是 server 端輸出的資料,要改成一行一組資料的方式:
{ name: "催促揽", to: "13" }
{ name: "催送发票(底单)", to: "38" }
{ name: "催送单", to: "39" }
{ name: "(底单)", to: "43" }
再來是 client 端的部份,接到的 row 必須再處理一次:
                formatItem: function(row, i, max) {  
                        var row = eval('(' + row + ')');
                        return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";  
                },  
                formatMatch: function(row, i, max) {  
                        var row = eval('(' + row + ')');
                        return row.name + " " + row.to;  
                },  
                formatResult: function(row) {  
                        var row = eval('(' + row + ')');
                        return row.to;  
                }  
這樣應該就可以囉...
作者: terry.lin    時間: 2009-6-11 15:48     標題: 回復 50# 的帖子

DEAR 版大:
我也遇到相同的問題,但是我是用jsp & servlet來做的,
我的進度到了#41,用英文都沒有問題,但是用中文的話,
在後端就變成會得到???的值,
因為看bau720123已經解決了,
但是我對php不熟,所以不知道您寫的那一段是在做什麼?如下:
能否幫我解決這個問題,感恩!

$q = join('', json_decode('["'. strtr($_GET['q'], '%u', '\u') . '"]'));
作者: wmh    時間: 2009-6-11 19:21

$q = join('', json_decode('["'. strtr($_GET['q'], '%u', '\u') . '"]'));
這一段是:


你可以在 http://json.org/ 取得 Java 處理 JSON 的 class
作者: terry.lin    時間: 2009-6-12 09:22     標題: 回復 60# 的帖子

謝謝大大,已經可以了!
作者: niplover    時間: 2009-7-20 19:33

wmh,您好,我使用jquery autocomplete的時候碰到了一點問題。

代碼如下:


<link rel="stylesheet" href="/5xun5mi/css/jquery.autocomplete.css" type="text/css"></link>
                <script src="http://www.google.com/jsapi" ></script>  
                <script language="javascript" type="text/javascript" >  
                        google.load("jquery", "1");
                </script>
                <script type="text/javascript" src="/5xun5mi/js/jquery.autocomplete.js" defer="defer" charset="GBK"></script>
               


<script language="javascript" type="text/javascript" charset=GBK>
     $("#searchtext").autocomplete("/5xun5mi/jsp/get_tip_data.jsp");
</script>


IE中運行時,總是提示紅色標注的哪行有錯,錯誤信息是:對象不支持此屬性或方法

然而在Firefox中運行是正常的,其錯誤控制台也沒有任何錯誤信息。

望wmh指教,謝謝!
作者: wmh    時間: 2009-7-20 21:02

把 defer="defer" 刪掉應該就可以囉。因為在 IE 遇到 defer="defer"  會先繼續往下執行,當執行到那一行的時候,autocomplete 這個 function 都還未載入完成,所以會出現這個訊息。
作者: niplover    時間: 2009-7-20 22:02

原帖由 wmh 於 2009-7-20 21:02 發表
把 defer="defer" 刪掉應該就可以囉。因為在 IE 遇到 defer="defer"  會先繼續往下執行,當執行到那一行的時候,autocomplete 這個 function 都還未載入完成,所以會出現這個訊息。 ...


非常感謝wmh,確實是這個原因造成的!
我之所以加那個defer屬性,是由於之前ie無法打開該站點信息。。
再次感謝~
作者: niplover    時間: 2009-7-20 22:09

還有個問題就是:

<input name="searchtext" type="text" class="input_search"
                                                        id="searchtext" maxlength="25" />
                                                <script language="javascript" type="text/javascript" charset=GBK>
                                                        $("#searchtext").autocomplete("get_tip_data.jsp");
                                                </script>

在get_tip_data.jsp中使用如下代碼
String searchtext = request.getParameter("searchtext");

获取的总是null,不知道爲什麽?

如果我使用 String searchtext = request.getParameter("q");
則獲取的是:searchtext ===  ???

注:我輸入的是中文

謝謝回覆!

[ 本帖最後由 niplover 於 2009-7-20 22:20 編輯 ]
作者: niplover    時間: 2009-7-20 23:17

原帖由 niplover 於 2009-7-20 22:09 發表
還有個問題就是:


                                               
                                                        $("#searchtext").autocomplete("get_tip_data.jsp");
                                               

在get_tip_data.jsp中使用如下代碼
String searchtext = request.getParameter("searchtext");

获取的总是null,不知道 ...


解決了,用escape函數,谢谢wmh!
作者: wmh    時間: 2009-7-20 23:17

server 端要用 q 這個變數去接才對喔,如果沒有接到正確的文字,可以先檢查看看網頁的編碼。
作者: niplover    時間: 2009-7-22 10:24

wmh,我還有個問題就是:

當我輸入的時候,autocomplete是動態獲取到input中的值,該參數是q, 但能否動態獲取多個參數呢?  比如: 我input後面跟了一組單選框(book,author),我如何將選中的值(比如author)也能動態的傳入autocomplete呢? 聽說有個extraParams的東西,但不清楚何如使用?
望指教~ 謝謝!
作者: wmh    時間: 2009-7-22 13:03

根據官網的說明, extraParams 的用法如下:
$("#states").autocomplete(url, {
   extraParams: {
       country: function() { return $("#country").val(); }
   }
}); 
如上,可以帶入額外的 country 參數,是抓目前 id="country" 這個欄位的值
作者: niplover    時間: 2009-7-22 14:38

嗯,好的,謝謝wmh,等我晚上回家去試試~
作者: niplover    時間: 2009-7-23 10:07

原帖由 wmh 於 2009-7-22 13:03 發表
根據官網的說明, extraParams 的用法如下:

$("#states").autocomplete(url, {
   extraParams: {
       country: function() { return $("#country").val(); }
   }
});


如上,可以帶入額外的 country 參數,是抓目前 ...


嗯,可以的,謝謝wmh! 以後得學會自己先看官方doc,解決不了在問,嘿~
作者: niplover    時間: 2009-7-26 14:56

wmh,再次請教~

如何才能讓autocomplete在使用方向鍵選中下拉列表中的某項時,input中同時也是這個值(像baidu一樣),而不是只能通過回車或單擊選中項使input為該值。。。

謝謝回覆!~

[ 本帖最後由 niplover 於 2009-7-26 14:57 編輯 ]
作者: wmh    時間: 2009-7-26 20:02

有個 autoFill 的屬性設定為 true 就可以囉

http://docs.jquery.com/Plugins/A ... #url_or_dataoptions
Fill the textinput while still selecting a value, replacing the value if more is typed or something else is selected.

作者: niplover    時間: 2009-7-27 09:28

非常感謝wmh~  晚上回去試試~
作者: niplover    時間: 2009-7-28 09:29

原帖由 wmh 於 2009-7-26 20:02 發表
有個 autoFill 的屬性設定為 true 就可以囉

http://docs.jquery.com/Plugins/A ... #url_or_dataoptions


我昨天晚上回去試用了下,將autoFill的屬性設定為true,結果是這樣的:


盤龍
狂龍
.
.
.

注:第一行為input,下麵是下拉列表,效果也就是如圖:   即:  input匹配第一行符合的記錄,自動去填充下拉列表第一行的在減去input字串長度的後一部份字符串(比如:input為龍, 下拉列表第一行為 盤龍, 盤龍長2,減去input的長1,還剩1,也就是說 需要在input后補齊的是盤龍的“龍”)。  不知道我這樣講清楚了沒?。。。

還有就是在下拉列表中用方向鍵選中項時,input不發生改變。。。

望指教~  非常感謝~!
作者: wmh    時間: 2009-7-28 11:40

自動補齊的功能通常是要先符合前面輸入的字串,再補齊。
以你的資料為例,若有「盤龍」和「狂龍」兩筆資料,則輸入「盤」時,會自動補齊「龍」才是
作者: niplover    時間: 2009-7-28 12:21

原帖由 wmh 於 2009-7-28 11:40 發表
自動補齊的功能通常是要先符合前面輸入的字串,再補齊。
以你的資料為例,若有「盤龍」和「狂龍」兩筆資料,則輸入「盤」時,會自動補齊「龍」才是 ...

嗯,我明白你的意思。
如果是:

盤根錯節
盤龍

這樣的下拉列表的話, 輸入[盤]時,會補齊[盤根錯節],然後方向鍵下選中[盤龍],input依然是[盤根錯節]而不是預期的[盤龍]。。
這有什麽解決方案嗎?
謝謝!
作者: wmh    時間: 2009-7-28 22:25

嗯,這個 plugin 原始的設計確實沒有在按「上」、「下」時重做 autoFill(),如果要這樣的呈現方式,可能要找其他 plugin 或自己修改囉。
作者: niplover    時間: 2009-7-29 00:27

原帖由 wmh 於 2009-7-28 22:25 發表
嗯,這個 plugin 原始的設計確實沒有在按「上」、「下」時做 autoFill(),如果要這樣的呈現方式,可能要找其他 plugin 或自己修改囉。


嗯,好的,我再想想其他辦法。
謝謝wmh啦~~
作者: niplover    時間: 2009-8-2 01:15

wmh,再請教一下~

今天又使用了一个jquery的datepicker插件  http://jqueryui.com/demos/datepicker/
结果总是在FF里报下面这个错误:
错误: $("#fromtime").datepicker is not a function

PS;检查了js的顺序 和demo里是一致的。。(我那個autocomplete也正常,這樣應該可以排除是緩存的問題)。。
敢问这是啥原因呢?
代码如下:
js部分:
<script type="text/javascript" src="/xm/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/xm/js/ui.core.js"></script>
<script type="text/javascript" src="/xm/js/ui.datepicker.js"></script>
<script type="text/javascript">
$(function() {
$('#fromtime').datepicker({
changeMonth: true,
changeYear: true
});
});
</script>

input部分:

<div>

<input name="fromtime" id="fromtime" type="text" size="30"
class="bg_sc_td_rt_lf" />

</div>
作者: wmh    時間: 2009-8-3 00:00

$("#fromtime").datepicker is not a function 表示你的 js 檔可能沒有正確載入喔,請確認檔案位置都正確。不然可先試試看直接用 jquery 網站上面的版本:
<script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.datepicker.js"></script>
PS. 若有其他 plugin 使用的問題,建議你另開新帖發言喔,這樣才不會和 Autocomplete 的問題混在一起喔。
作者: niplover    時間: 2009-8-3 09:07

原帖由 wmh 於 2009-8-3 00:00 發表
$("#fromtime").datepicker is not a function 表示你的 js 檔可能沒有正確載入喔,請確認檔案位置都正確。不然可先試試看直接用 jquery 網站上面的版本:





PS. 若有其他 plugin 使用的問題,建議你另開新帖發言喔,這樣 ...


謝謝! 晚上回去試試~
PS:  OK,下次謹記不同主題發新帖~
作者: lyndon1104    時間: 2009-9-25 16:42     標題: 想在右邊加入按鈕

版大您好:

小弟參考您的範例
但想要在輸入框右邊加入下拉的按鈕
以表示這個值有auto-complete的功能
如: http://evaqoo.blogdns.net/jquery-autocomplete/test/test.html

原始碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" c>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />     
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script type="text/javascript">  
$(function() {   
var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];      
  $("#t1").autocomplete(data,  {minChars: 0,autoFill: true,matchContains: true, mustMatch: true});      
  $("#b1").bind("click",function(e){
                $("#t1").search(e);
        });      
});   
</script>
</head>

<body>
<input type="text" name="t1" id="t1" /><input type="button" id="b1" value="▼">  
<span></span>
</body>
</html>

但似乎沒辦法

請教是否有方法可行?

謝謝

[ 本帖最後由 lyndon1104 於 2009-9-25 16:43 編輯 ]
作者: wmh    時間: 2009-9-26 09:23

你希望做到什麼樣的功能呢?按下旁邊的按鈕可以有作用嗎?還是只是裝飾的樣式?

若是裝飾的樣式,可以在原本的輸入框透過 CSS 指定一個背景圖即可。
作者: lyndon1104    時間: 2009-9-26 15:54

抱歉沒說清楚
就是按下旁邊的按鈕,在輸入框沒有key任何字的情況下,
也會顯示出auto-complete所設定的預設值
能夠做到嗎?
謝謝
作者: wmh    時間: 2009-9-28 22:35

稍微看了一下,似乎沒有這樣的功能喔...
作者: lyndon1104    時間: 2009-9-30 09:55

嗯,還是謝謝您....
作者: chiyuan1980    時間: 2010-1-28 11:34

請問~
<script type="text/javascript">
$(function() {
    var data = ['abc','acd','bad','cde,'aac];
    $("#t1").autocomplete(data, { matchContains: true });
   });
</script>


這樣有辦法
當我輸入
a
時只出現

abc
acd
aac

a開頭的提示字?

而不是
出現
abc
acd
bad
aac

中文也一樣

因為我現調屬性幾乎都沒變成我希望的~
謝謝!
作者: wmh    時間: 2010-1-28 16:29

回復 86# chiyuan1980

把 matchContains 改成 false 就可以囉
作者: WILLIAMer    時間: 2010-2-9 11:40

遇到了一個問題
不知道有沒有人也一樣

我在單獨的jsp中執行沒問題
但如果以下兩種情況
1.這支jsp include其他jsp
2.這支jsp被其他頁面include
都會出現error message
IE是Object doesnt support this property or method
FF是autocomplete is not a function

本來是以為沒呼叫成功
不過我在jquery.autocomplete.js加入測試function
且呼叫它是有執行的
所以並不是jquery.autocomplete.js沒載入

試過等每個頁面的DOM都載入後才執行
也是一樣的錯誤訊息

目前這個text field是放在header
只執行header是ok的
現在每個頁面都會include header
這樣的情況就無法正確執行
作者: wmh    時間: 2010-2-9 12:05

DOM 都載入不代表 js 都載入完成喔,可以試試看先放到 window onload 試試看
$(window).load(function() {
  //放這邊
});
如果可以,表示執行 autocomplete 時,autocomplete.js 還未載入,所以再調整一下順序即可。
或放 window onload 也可以,只是可能比較慢才執行。
作者: WILLIAMer    時間: 2010-2-9 17:53

本帖最後由 WILLIAMer 於 2010-2-9 18:10 編輯

我的main page一共include header,left,footer三塊
我剛把left跟footer拿掉發現就可以了...
表示我得等所有的頁面皆載入才行

本來我只有在header加入
$(window.parent.document).ready(function(){
                $(document).ready(function(){
                        $("#Keyword").autocomplete("searchSuggest.action",
                  {
                          minChars: 1,
                          matchContains: false 
                  }        
                  );
                });
        });
以為這樣就可以確定parent已載入完畢
看來是沒顧慮到left跟footer這兩塊是否已載入完成了

好奇的是
header應該是管自己的jquery.autocomplete.js有沒有載入好就好了吧?
跟其他mainpage include的page是否載入好有關?
作者: wmh    時間: 2010-2-9 22:10

如果你的 include 是 server 端的,那麼最後組成 client 端的頁面其實只有一個喔。

你用的是 document ready,因此只有文件本身載入完成,並非所有的檔案都載入完成喔!
作者: WILLIAMer    時間: 2010-2-10 10:53

感謝你的幫忙
問題解決了
作者: kelvinjones    時間: 2010-2-25 11:25

wmh 老兄,看到你這麼利害 我想請教你一下

在google.com打goo 的話會有一堆相關的東西
最後右邊有個 "關閉" 的 link
autocomplete 可以做得出來嗎?
作者: wmh    時間: 2010-2-25 13:32

他沒有提供這樣的功能讓你直接用,如果需要這樣的功能,得找其他的,或是自己做修改囉。
作者: kelvinjones    時間: 2010-2-25 17:47

他沒有提供這樣的功能讓你直接用,如果需要這樣的功能,得找其他的,或是自己做修改囉。 ...
wmh 發表於 2010-2-25 13:32


魔了一天都做不了
我在function init() 中加了

                elementB = $("<DIV id='basicDiv'></DIV>");
                elementA = $("<A id='basicLink'>hihi</A>");
                elementA.appendTo(elementB);
                elementB.appendTo(element);
在 function request(term, success, failure) 中加了

                       
                                        if(parsed.length>options.max){

                                                $("#basicDiv").show();
                                        }else{
                                       
                                                $("#basicDiv").hide();
                                        }

我有三個textfield , 第一次打字autocomplete ,成功, 加了的東西出現, 但我去另二個textfield打字郤不能出現我加的東西?大大知道為什麼嗎?
作者: kelvinjones    時間: 2010-2-26 10:05

魔了一天都做不了
我在function init() 中加了

                elementB = $("");
                elementA = $("hihi");
                elemen ...
kelvinjones 發表於 2010-2-25 17:47


己解決, 不用id 用class

作者: wmh    時間: 2010-2-26 10:06

我直接把你改的 code 用官方的範例測試發現都還蠻正常的喔。
你有看到什麼樣的錯誤訊息嗎?
作者: kelvinjones    時間: 2010-2-26 17:34

我直接把你改的 code 用官方的範例測試發現都還蠻正常的喔。
你有看到什麼樣的錯誤訊息嗎? ...
wmh 發表於 2010-2-26 10:06



我巴他改成這樣子就可以
我在function init() 中加了

                elementB = $("<DIV/>").addClass("basicDiv_jquery_autoComplete");
                elementA = $("<A>hihi</A>").addClass("basicLink_jquery_autoComplete").;
                elementA.appendTo(elementB);
                elementB.appendTo(element);

在 function request(term, success, failure) 中加了

                       
                                        if(parsed.length>options.max){
                                                $("div.basicDiv_jquery_autoComplete").show();
                                        }else{
                                                $("div.basicDiv_jquery_autoComplete").hide();
                                        }
                                       
這樣就行了, 我有三個textfield 每個都call autocomplete ,可能這樣他init 了三次, 相同id 產生了問題

但現在又發生另一個問題了, 最後一行<A>hihi</A> 給其他 selectbox 當住了....
用了  $("div.basicDiv_jquery_autoComplete").bgiframe();  , set 了 z-index 也不行, 不知怎搞的
作者: a0808008    時間: 2010-3-5 11:22

不好意思 請問一下

我去抓SQL內的資料出來比對

但是我抓出來卻不會比對 只會把全部抓出來(意思就是說 我隨便打一個東西 他就會把所有資料庫內的值秀出來)

不知道是哪邊的問題??(我抓資料的方法不夠好??)

還有 除了資料庫內全部會秀出來之外

在最後一筆資料下面還有個將近15個左右的空白

是要改jquery??


autocomplete.aspx.cs
        private string Conn = ConfigurationManager.AppSettings["ConnectionString"];

        protected void Page_Load(object sender, EventArgs e)
        {
            getData1();

        }
        private void getData1()
        {            
            string q = Request["q"];
            if (q == "")
            {
                return;
            }

            else
            {

                SqlCommand oCmd = new SqlCommand();
                oCmd.Connection = new SqlConnection(Conn);
                oCmd.CommandText = @"select case_name from shtc_case group by case_name";
                oCmd.CommandType = CommandType.Text;
                SqlDataAdapter oda = new SqlDataAdapter(oCmd);
                DataSet ds = new DataSet();
                oda.Fill(ds);
                string[] data = new string[ds.Tables[0].Rows.Count];

                for (int j = 0; j < ds.Tables[0].Rows.Count; j++)
                {
                    string ss = ds.Tables[0].Rows[j]["case_name"].ToString();
                    data[j] = ss.ToString();
                }

                foreach (string x in data)
                {
                    Response.Write(x+"\n");
                }
                //string[] data = new string[] { "trhtrhr", "acvbcv", "cbvxbdfb", "adqfvbb", "otulyjfgsdg" };
            }
        }
    }

作者: wmh    時間: 2010-3-9 08:34

回復 99# a0808008

你 SQL 語法要修改,針對傳入的  Request["q"] 做資料篩選喔。




歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)