jQuery plugin: Autocomplete 參數及實例

時間 2019-11-13

標籤 jquery plugin autocomplete 參數實例欄目 JQuery 简体版

原文原文鏈接

官網：jQuery plugin: Autocomplete javascript

（注：此插件已經再也不更新。它的繼任者是jQuery UI的一部分，）php

此插件依賴於 jquery 1.2.6 --- jquery 1.8.3 css

一、jquery.autocomplete API
　　語法： autocomplete(url/data, [options] )
　　參數： url / data：url或者數組 [options]：可選項 html

二、[options]：可選項，選項解釋以下： java

　　minChars: 0, 　　　　　　　　  //至少輸入的字符數，default：1；若是設爲0，在輸入框內雙擊或者刪除內容時顯示列表。 

　　width: 220,　　　　　　　　　  //下拉框的寬度，default：input元素的寬度

　　max: 10, 　　　　　　　　　　 //下拉項目的個數，default：10

　　scrollHeight: 300,　　　　　　 // 下拉框的高度， Default: 180

　　scroll: true,　　　　　　　　    //當結果集大於默認高度時，是否使用滾動條，Default: true

　　multiple: false, 　　　　　　　 //是否容許輸入多個值. Default: false

　　autoFill: false,　　　　　　　   // 是否自動填充. Default: false

　　multipleSeparator: " ",　　    //輸入多個字符時,用來分開各個的字符. Default: ","

　　matchCase:false,　　　　     //是否開啓大小寫敏感

　　selectFirst:true,    　　　　　  // 若是設置成true,下拉列表的第一個值將被自動選擇, Default: true

　　matchSubset:true,    　　　   //是否啓用緩存

　　cacheLength: 10,    　　    　　 //緩存的長度.即緩存多少條記錄.設成1爲不緩存.Default: 10

　　delay: 20,    　　　　　　　　 //擊鍵後的延遲時間(單位毫秒).Default: 遠程爲400 本地10

　　mustMatch:false,    　　    　   //若是設置爲true,只會容許匹配的結果出如今輸入框,當用戶輸入的是非法字符時,將被清除， Default: false

　　matchContains:true,    　　 //決定比較時是否要在字符串內部查看匹配.Default: false

　　formatItem: function(row, i, max) { }

　　　　//結果中的每一行都會調用這個函數,返回值將用LI元素包含,顯示在下拉列表中. 三個參數(row, i, max): 返回的結果數組, 當前處理的行數(從1開始), 當前結果數組元素的個數. Default: none, 表示不指定自定義的處理函數.

　　formatResult : function(row, i, max) { }

　　　　//和formatItem相似,但能夠將將要輸入到input文本框內的值進行格式化.一樣有三個參數,和formatItem同樣.Default: none,表示要麼是隻有數據,要麼是使用formatItem提供的值.

　　formatMatch: function(row) { }

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

　　result (function(event, data, formatted){}) //此事件會在用戶選中某一項後觸發，參數爲：event: 事件對象, data: 選中的數據行,formatted:formatResult函數返回的值;

　　　　例如： $("#d").result(function(event, data, formatted){alert(formatted);})

　　extraParams (Object):

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

　　三、實例：實例下載python

<!DOCTYPE HTML >
<html>
<head>
<title>jquery.autocomplete.js 實例</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<style type="text/css">
    p{margin:8px;}
</style>
</head>

<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
<div id="content">
    <form autocomplete="off">
        <p>
            <label>City1:</label>
            <input type="text" id="city1" />
        </p>

        <p>
            <label>City2:</label>
            <input type="text" id="city2" />
        </p>
        
        <p>
            <label>Tags:</label>
            <input type="text" id='tags' />
        </p>
        <p>
            <label>E-Mail:</label>
            <input type="text" id="email" />
        </p>
    </form>
    <h3>Result:</h3> <ol id="result"></ol>
</div>
</body>
</html>

<script type="text/javascript">

$(function() {    
    var cities = [
        "Aberdeen", "Ada", "Beaverdam", "Bedford","Cuyahoga Falls", "Dayton", "De Graff", 
        "Fairfield", "Fairpoint", "Groveport", "Grover Hill","Hamden", "Hamersville", "Irondale", "Ironton", 
        "Jacksontown","Kirby", "Kirkersville", "Lafayette", "Lafferty", "Munroe Falls", "Murray City",
        "Oberlin", "Oceola", "Paris", "Parkman", "Ravenna", "Rawson", "Saint Louisville", 
        "Toledo", "Tontogany", "Wakeman", "Walbridge", "Yorkshire", "Yorkville", "Zoar"
    ];
    var emails = [
        { name: "Peter Pan", to: "peter@pan.de" },
        { name: "Molly", to: "molly@yahoo.com" },
        { name: "Forneria Marconi", to: "live@japan.jp" },
        { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
        { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
        { name: "Don Corleone", to: "don@vegas.com" },
        { name: "Mc Chick", to: "info@donalds.org" },
        { name: "Donnie Darko", to: "dd@timeshift.info" },
        { name: "Quake The Net", to: "webmaster@quakenet.org" },
        { name: "Dr. Write", to: "write@writable.com" }
    ];

    $("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"]);
    
    $("#city1").autocomplete(cities);

    $("#city2").autocomplete(cities, {
        
        minChars: 0,        //至少輸入的字符數，default：1；

        width: 220,            //下拉框的寬度，default：input元素的寬度

        max: 10,            //下拉項目的個數，default：10

        scrollHeight: 300,    // 下拉框的高度， Default: 180 

        scroll: true,        //當結果集大於默認高度時，是否使用滾動條，Default: true

        multiple: false,    //是否容許輸入多個值. Default: false

    });

    $("#email").autocomplete(emails, {
        minChars: 0,
        width: 310,
        matchContains: "word",
        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;
        }
    });

    function log(event, data, formatted) {
        $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
    }
    $(":text").result(log)    //被選中的插入Result

});    
</script>