糊言亂語

          志未半斤, 才無八兩. 有苦有樂, 糊涂過活。
          posts - 25, comments - 7, trackbacks - 0, articles - 42
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          AutoSuggest 使用手冊

          Posted on 2007-10-19 18:17 Stanley Sun 閱讀(2536) 評論(2)  編輯  收藏 所屬分類: Html UI
           



                  AutoSuggest是通過AJAX技術實現的一種類似于ComboBox之類的輸入框,當輸入一些提示字符后,AS會自動的把輸入框中的Value通過AJAX發送到Server中,Server自定義的解析發送的數據,然后把返回數據通過XMLJSON方式返回到AS中。AS再根據Server返回的標準格式的數據構建出提示候選框,當用鼠標或鍵盤選中候選項后填充到輸入框中。在寫這篇手冊的時候,AutoSuggest的最新版本是autosuggest_v2.1.3。基本的運行原理如上。

          AutoSuggest的主要的物理文件有:bsn.AutoSuggest_2.1.3.jsautosuggest_inquisitor.css。其他的還有一些圖片資源文件,一個測試html與一個test.php的服務器段頁面。結構如下:
              

          │ .DS_Store

          │ ._.DS_Store

          │ ._bsn.AutoSuggest_2.
          1.3.html

          │ ._test.php

          │ bsn.AutoSuggest_2.
          1.3.html

          │ test.php



          ├─css

          │ │ .DS_Store

          │ │ ._.DS_Store

          │ │ autosuggest_inquisitor.css

          │ │

          │ └─img_inquisitor

          │      │ .DS_Store

          │      │ ._.DS_Store

          │      │ ._as_pointer.gif

          │      │ ._hl_corner_bl.gif

          │      │ ._hl_corner_br.gif

          │      │ ._hl_corner_tl.gif

          │      │ ._hl_corner_tr.gif

          │      │ ._ul_corner_bl.gif

          │      │ ._ul_corner_br.gif

          │      │ ._ul_corner_tl.gif

          │      │ ._ul_corner_tr.gif

          │      │ as_pointer.gif

          │      │ hl_corner_bl.gif

          │      │ hl_corner_br.gif

          │      │ hl_corner_tl.gif

          │      │ hl_corner_tr.gif

          │      │ ul_corner_bl.gif

          │      │ ul_corner_br.gif

          │      │ ul_corner_tl.gif

          │      │ ul_corner_tr.gif

          │      │

          │      └─_source

          │              .DS_Store

          │              ._.DS_Store

          │              ._as_pointer.png

          │              ._li_corner.png

          │              ._ul_corner.png

          │              as_pointer.png

          │              li_corner.png

          │              ul_corner.png



          └─js

                 .DS_Store

                 ._.DS_Store

                 ._bsn.AutoSuggest_2.
          1.3.js

                 bsn.AutoSuggest_2.
          1.3.js

                 bsn.AutoSuggest_2.
          1.3_comp.js


          AutoSuggest是一組JavaScript類庫,其中主要的對象就是bsn.AutoSggest對象,基本的功能都是在這個對象中完成的。首先我們構建一個簡單的示例:
              

          var options_xml = {

                                          script:
          function(input){return"suggestAction!userName.action?signer="+input; }//(1).帶有傳送數據的請求路徑,其中input是輸入框的value。

                                          varname:
          "input"//(2).儲存輸入框value的變量名

                                          delay:
          800//(3).發送請求的延時時間

                                          cache:
          false//(4).是否緩存

                                          noresults:
          "無符合的記錄!",//(5).當沒有符合的查詢結果時的提示信息

                                          timeout:
          10000,//(6).候選框停留時間

                                          callback: 
          function(record){ document.getElementById("temp").value = record.value; } //(7).選擇候選項后的回調函數

          }
          ;

          var as_xml = new bsn.AutoSuggest('signer', options_xml); //(8).創建autosuggest對象,并綁定一個輸入框




          通過這樣簡單的方式我們就可以完成在頁面中的autosuggest編碼了。其中的參數表可以看下表:

          Property

          Type

          Default

          Description

          script

          String / Function

          -

          REQUIRED!
          Either: A string containing the path to the script that returns the results in XML format. (eg, "myscript.php?")
          Or: A function that accepts on attribute, the autosuggest field input as a string, and returns the path to the result script.

          varname

          String

          "input"

          Name of variable passed to script holding current input.

          minchars

          Integer

          1

          Length of input required before AutoSuggest is triggered.

          className

          String

          "autosuggest"

          Value of the class name attribute added to the generated ul.

          delay

          Integer

          500

          Number of milliseconds before an AutoSuggest AJAX request is fired.

          timeout

          Integer

          2500

          Number of milliseconds before an AutoSuggest list closes itself.

          cache

          Boolean

          true

          Whether or not a results list should be cached during typing.

          offsety

          Integer

          -5

          Vertical pixel offset from the text field.

          shownoresults

          Boolean

          true

          Whether to display a message when no results are returned.

          noresults

          String

          No results!

          No results message.

          callback

          Function

          A function taking one argument: an object

          {id:"1", value:"Foobar", info:"Cheshire"}

          json

          Boolean

          false

          Whether or not a results are returned in JSON format. If not, script assumes results are in XML.

          maxentries

          Integer

          25

          The maximum number of entries being returned by the script. (Should correspond to the LIMIT clause in the SQL query.)

          之后我們只要在我的服務器中解析傳入的signer參數返回,如下格式的xml就可以了。當然也可以用JSON方式,不過我在這里就不在演示了。
              

          <results>

                                          
          <rs id="1" info="">Foobar</rs>

                                          
          <rs id="2" info="">Foobarfly</rs>

                                          
          <rs id="3" info="">Foobarnacle</rs>

          </results>


          AutoSuggest是比較方便的一種實現類Google Suggest的解決方式,提供的js文件也是比較精巧的,并提供的一個壓縮后的js腳本文件只有8.33 KB大小。如果要查看其代碼可以找到一個沒有壓縮的原始版本的源代碼,其中的代碼也是比較容易閱讀,更改起來也是比較簡單的。我會在以后寫一篇《AutoSuggest代碼解析》。

          更多信息可查閱 http://www.brandspankingnew.net/archive/2007/02/ajax_auto_suggest_v2.html


          評論

          # nnn  回復  更多評論   

          2012-07-23 09:30 by dfdssd
          sdfsdf

          # re: AutoSuggest 使用手冊  回復  更多評論   

          2014-05-08 17:51 by sdf
          dfsdf

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 嵊泗县| 密山市| 湟中县| 会理县| 香港| 安义县| 隆子县| 平安县| 昭平县| 共和县| 周口市| 颍上县| 澜沧| 乐山市| 都昌县| 郎溪县| 家居| 新丰县| 苗栗县| 孟津县| 美姑县| 鸡泽县| 乌拉特后旗| 蕲春县| 邯郸县| 武宁县| 岑溪市| 威信县| 拜泉县| 兴安县| 久治县| 武强县| 安平县| 天气| 平凉市| 枣阳市| 天镇县| 本溪市| 台南县| 清丰县| 怀宁县|