Jquery autocomplete.js輸入框聯想補全功能

Jquery autocomplete.js插件下載地址：https://github.com/agarzola/jQueryAutocompletePlugin

有兩種用法，一種是直接使用頁面的數據，一種是輸入請求地址，請求后台返回數據

1.數據格式就是下方這種

    
    <link href="../autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../lib/jQuery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../autocomplete/jquery.autocomplete.js"></script>
<input type="text" value="" id="searchInput" />
<script>
    <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> emails </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> [
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Peter Pan</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">peter@pan.de</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Molly</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">molly@yahoo.com</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Forneria Marconi</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">live@japan.jp</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Master &lt;em&gt;Sync&lt;/em&gt;</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">205bw@samsung.com</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Dr. &lt;strong&gt;Tech&lt;/strong&gt; de Log</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">g15@logitech.com</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Don Corleone</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">don@vegas.com</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Mc Chick</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">info@donalds.org</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Donnie Darko</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">dd@timeshift.info</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Quake The Net</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">webmaster@quakenet.org</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Dr. Write</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">write@writable.com</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">GG Bond</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Bond@qq.com</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> },
        { name: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Zhuzhu Xia</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, to: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">zhuzhu@qq.com</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> }
    ];

$(function(){
$(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#searchInput</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).autocomplete(emails, {
                max: </span><span style="background-color: #f5f5f5; color: #000000;">5</span><span style="background-color: #f5f5f5; color: #000000;">,    </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">列表里的條目數</span>

 minChars: 0, //自動完成激活之前填入的最小字符

 width: $("#searchInput").width()+1, //提示的寬度，溢出隱藏

 scrollHeight: 300, //提示的高度，溢出顯示滾動條

 matchContains: true, //包含匹配，就是data參數里的數據，是否只要包含文本框里的數據就顯示

 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;
 }
 }).result(function(event, row, formatted) {
 alert($("#searchInput").width());
 });
 });
</script>

2.后台傳過來的數據格式也可以是上邊這種，但是需要重寫下parse方法：

[{"bankCode":"111","bankName":"中國工商銀行"},{"bankCode":"2","bankName":"中國銀行"}]

    $(function(){
    $(</span>"#inbankid").autocomplete('&lt;%=request.getContextPath() %&gt;/protected/accountAction.do?m=searchBankName'<span style="color: #000000;">, {
        max: </span>5,    <span style="color: #008000;">//</span><span style="color: #008000;">列表里的條目數</span>
        minChars: 1,    <span style="color: #008000;">//</span><span style="color: #008000;">自動完成激活之前填入的最小字符</span>
        width: $("#inbankid").width(),     <span style="color: #008000;">//</span><span style="color: #008000;">提示的寬度，溢出隱藏</span>
        scrollHeight: 300,   <span style="color: #008000;">//</span><span style="color: #008000;">提示的高度，溢出顯示滾動條</span>
        matchContains: <span style="color: #0000ff;">true</span>,    <span style="color: #008000;">//</span><span style="color: #008000;">包含匹配，就是data參數里的數據，是否只要包含文本框里的數據就顯示</span>
        autoFill: <span style="color: #0000ff;">false</span>,    <span style="color: #008000;">//</span><span style="color: #008000;">自動填充</span>
        dataType : "json"<span style="color: #000000;">,
        parse: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(data){
            </span><span style="color: #0000ff;">var</span> rows =<span style="color: #000000;"> [];
            </span><span style="color: #0000ff;">var</span> d =<span style="color: #000000;"> data;
            </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0; i&lt;d.length; i++<span style="color: #000000;">){
                rows[rows.length] </span>=<span style="color: #000000;"> {
                    data:d[i],
                    value:d[i].bankName,
                    result:d[i].bankName
                };
            }
            </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> rows;
        },
        formatItem: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(row, i, max) {
            </span><span style="color: #0000ff;">return</span> row.bankName + '[' + row.bankCode + ']'<span style="color: #000000;">;
        },
        formatMatch: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(row, i, max) {
            </span><span style="color: #0000ff;">return</span><span style="color: #000000;">  row.bankName;
        },
        formatResult: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(row) {
            </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> row.bankName;
        }
    }).result(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(event, row, formatted) {
        
    });
});</span></pre>

Jquery autocomplete.js輸入框聯想補全功能

免責聲明！