<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    jquery-autocomplete

    jquery-autocomplete學習

    一、用前必備

    官方網站:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

    當前版本:1.0.2

    需要JQuery版本:1.2.6

    二、使用

    <script src="./jquery-1.3.2.js" type="text/javascript"></script>

    <script src="./jquery.autocomplete.js" type="text/javascript"></script>

    <link rel="stylesheet" href="./jquery.autocomplete.css" />

    autocomplete( url or data, options ) Returns: jQuery

    讓一個input或textarea有autocomplete功能

    例子

    Js代碼

    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");  

    $("#example").autocomplete(data);

    以上的例子就是為id為example添加autocomplete

    var emails = [

        { name: "Peter Pan", to: "

        { name: "Molly", to: "

        { name: "Forneria Marconi", to: "

        { name: "Master <em>Sync</em>", to: "

        { name: "Dr. <strong>Tech</strong> de Log", to: "

        { name: "Don Corleone", to: "

        { name: "Mc Chick", to: "

        { name: "Donnie Darko", to: "

        { name: "Quake The Net", to: "

        { name: "Dr. Write", to: "

    ];

    //emails的數組格式如上,formatItem代表的是顯示的格式,formatMatch表示匹配的內容,formatResult表示結果的內容

    $("#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;

        }

    });

    三、參數說明:

    * minChars (Number):

        在觸發autoComplete前用戶至少需要輸入的字符數.Default: 1,如果設為0,在輸入框內雙擊或者刪除輸入框內內容時顯示列表

    * width (Number):

        指定下拉框的寬度. Default: input元素的寬度

    * max (Number):

        autoComplete下拉顯示項目的個數.Default: 10

    * delay (Number):

        擊鍵后激活autoComplete的延遲時間(單位毫秒).Default: 遠程為400 本地10

    * autoFill (Boolean):

        要不要在用戶選擇時自動將用戶當前鼠標所在的值填入到input框. Default: false

    * mustMatch (Booolean):

        如果設置為true,autoComplete只會允許匹配的結果出現在輸入框,所有當用戶輸入的是非法字符時將會得不到下拉框.Default: false

    * matchContains (Boolean):

        決定比較時是否要在字符串內部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false

    * selectFirst (Boolean):

        如果設置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,盡管它沒被手工選中(用鍵盤或鼠標).當然如果用戶選中某個項目,那么就用用戶選中的值. Default: true

    * cacheLength (Number):

        緩存的長度.即對從數據庫中取到的結果集要緩存多少條記錄.設成1為不緩存.Default: 10

    * matchSubset (Boolean):

        autoComplete可不可以使用對服務器查詢的緩存,如果緩存對foo的查詢結果,那么如果用戶輸入foo就不需要再進行檢索了,直接使用緩存.通常是打開這個選項以減輕服務器的負擔以提高性能.只會在緩存長度大于1時有效.Default: true

    * matchCase (Boolean):

        比較是否開啟大小寫敏感開關.使用緩存時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false

    * multiple (Boolean):

        是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default: false

    * multipleSeparator (String):

        如果是多選時,用來分開各個選擇的字符. Default: ","

    * scroll (Boolean):

        當結果集大于默認高度時是否使用卷軸顯示 Default: true

    * scrollHeight (Number):

        自動完成提示的卷軸高度用像素大小表示 Default: 180  

    * formatItem (Function):

        為每個要顯示的項目使用高級標簽.即對結果中的每一行都會調用這個函數,返回值將用LI元素包含顯示在下拉列表中. Autocompleter會提供三個參數(row, i, max): 返回的結果數組, 當前處理的行數(即第幾個項目,是從1開始的自然數), 當前結果數組元素的個數即項目的個數. Default: none, 表示不指定自定義的處理函數,這樣下拉列表中的每一行只包含一個值.

    * formatResult (Function):

        和formatItem類似,但可以將將要輸入到input文本框內的值進行格式化.同樣有三個參數,和formatItem一樣.Default: none,表示要么是只有數據,要么是使用formatItem提供的值.

    * formatMatch (Function):

        對每一行數據使用此函數格式化需要查詢的數據格式. 返回值是給內部搜索算法使用的. 參數值row

    * extraParams (Object):

        為后臺(一般是服務端的腳本)提供更多的參數.和通常的作法一樣是使用一個鍵值對對象.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前用戶輸入了foo). Default: {}

    * result (handler) Returns: jQuery

        此事件會在用戶選中某一項后觸發,參數為:

        event: 事件對象. event.type為result.

        data: 選中的數據行.

        formatted:formatResult函數返回的值

        例如:

        $("#singleBirdRemote").result(function(event, data, formatted) {

    //如選擇后給其他控件賦值,觸發別的事件等等

    });

    四、注意問題:

    1.網上有人說對中文的檢索時處理有問題,經過測試此版本沒有問題^-^

    2.在使用遠程地址時,它默認傳入的參數是:q(輸入值),limit(返回結果的最大值),可以使用extraParams傳入其他的參數

    3.autocomplete在使用ajax傳遞參數時,默認使用了get方式傳遞,也實在是沒有找到可以通過參數提交post方式的辦法。

    解決方式1:在使用ajax的get方式傳遞中文時,使用new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8")獲得參數值

    解決方式2:修改jquery.autocomplete.js代碼,把get方式修改為post方式,然后參見之前ajax解決中文亂碼的問題的

     

    轉載:http://blog.sina.com.cn/s/blog_608475eb0100g6qc.html

    posted on 2011-11-08 11:41 小羅 閱讀(717) 評論(0)  編輯  收藏 所屬分類: JS&JQuery


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


    網站導航:
     
    <2025年5月>
    27282930123
    45678910
    11121314151617
    18192021222324
    25262728293031
    1234567

    導航

    統計

    常用鏈接

    留言簿

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    相冊

    收藏夾

    Web Framework

    常上的技術網站

    查找資料的java網站

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 日韩午夜免费视频| 国产区卡一卡二卡三乱码免费| 精品国产亚洲一区二区三区| fc2成年免费共享视频网站| xvideos亚洲永久网址| 九九九国产精品成人免费视频| 亚洲av麻豆aⅴ无码电影| 成人免费观看男女羞羞视频| 亚洲精品无码专区2| 中文字幕免费不卡二区| 亚洲2022国产成人精品无码区 | 亚洲中文久久精品无码1| 18禁美女裸体免费网站| 亚洲深深色噜噜狠狠网站| 全免费一级午夜毛片| 四虎国产精品成人免费久久| 亚洲午夜国产精品无码| 免费A级毛片无码视频| 亚洲天堂一区在线| 成人免费无码大片a毛片软件| 亚洲AV成人片无码网站| 亚洲日韩中文在线精品第一| 四虎影视在线影院在线观看免费视频 | 99久久99热精品免费观看国产| 精品日韩亚洲AV无码一区二区三区| 国产四虎免费精品视频| 亚洲AV成人无码久久WWW| 国内精品久久久久久久亚洲| 日韩av无码久久精品免费| 亚洲永久网址在线观看| 亚洲男人天堂2020| a级精品九九九大片免费看| 亚洲高清无在码在线电影不卡| 在线精品免费视频无码的| 国产精品福利片免费看| 亚洲黄色中文字幕| 免费a在线观看播放| 午夜无码A级毛片免费视频| 亚洲日本中文字幕天天更新| 中文字幕在线亚洲精品| 一个人看的www在线观看免费|