返回列表 發帖

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

回復 1# wmh
要改用POST的方式而不是用GET
是直接在參數加上type: "POST",?
因為加了好像一樣被用GET送出....

TOP

回復 127# wmh

大大,我知道如何去select,只是我目前不知道在seachDB.asp的那裡要如何將得到的資料回傳
假設db裡有台灣各城市
我的seachDB.asp
       tSql = "select * from Country where countryName like '%cName%'"
       Set rs = Server.CreateObject("ADODB.Recordset")
       rs.Open tSql, conn, 3

我會抓到多筆資料,但是要如何讓他回傳至原始"Country.asp"中並呈現出來呢?

TOP

回復 126# Federer

從資料庫撈取資料的部份請參考一般程式語言的書籍,大多都會寫到喔。

簡單的說如果從 q 取得參數後,要進資料庫讀取,可以用以下 SQL
SELECT a, b, c FROM your_table WHERE field LIKE 'q%'
To infinity and beyond!

TOP

wmh大大,您好,最近剛好在研究jquery的autocomplete,看到您的文章,
也成功的試出第一種方法~~
但是現在我想要進行將text的值,即時抓取資料庫的資訊~~所以需要使用到資料庫,但是由於剛剛接觸jquery,所以要如何進行資料庫的搜尋和Autocomplete沒有任何頭緒,不知道您是否有相關的code可以提供給我參考,感謝您的指教,謝謝

我是用asp,而db mssql~~

TOP

版主,你好:
因為這個範例都是必須先輸入一個文字才會搜尋,
我想請問是否有支援滑鼠點一下就會列出所有選項的效果呢??
如果有要在哪裡做設定或更改呢??
謝謝~

TOP

Dear 版主,

在網路上很難找到 jquery 的 JSP 範例程式.
昨日用此論壇討論說明, 改寫 Viral Patel 的 Tutorial: Create Autocomplete feature with Java – JSP / jQuery.   

1. auto_tString.jsp (亦可寫為 .html)
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <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' src='./js/jquery.ajaxQueue.js'></script>

        <script type="text/javascript">
        $(function() {  
            $("#tString").autocomplete("test_auto.jsp", {minChars: 0,
                        max: 12,
                        autoFill: true,
                        mustMatch: false,
                        matchContains: false,
                        scrollHeight: 240});
          });  
         </script>
</head>
<body>
         <p>
     tString AutoComplete <input type="text" name="tString" id="tString" />
</body>
</html>

2. test_auto.jsp
    <%@page import="java.util.Iterator"%>
<%@page import="java.util.List,java.util.ArrayList"%>
<%
//        DummyDB db = new DummyDB();

        String query = request.getParameter("q");
       
        List<String> tt=new ArrayList<String>();
        tt.add("aaa");
        tt.add("abbc");
        tt.add("accd");
        tt.add("adde");

        Iterator<String> iterator = tt.iterator();
        while(iterator.hasNext()) {
                String tString = (String)iterator.next();
                out.println(tString);
        }
%>
兩個程式即使用 Ajax 完成 Autocomplete, 將 tt.add 放入資料庫 SELECT 出來的 Data.
應該可以完成 Database 的 Autocomplete 功能.

TOP

回復 122# ckt1105

原來是換行的問題
To infinity and beyond!

TOP

回復 110# felix0131


Hi,

     我試出來了!不能用<br>,要用vbcrlf就ok嚕!!

希望對你有幫助!!

TOP

回復 120# wmh


    問題已經解決了,謝謝您!

TOP

返回列表 回復 發帖