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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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;">[e-mail]</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>


    
    
    

 

好文要顶 关注我 收藏该文

【漫步云端】
关注 - 7
粉丝 - 8

+加关注

0

0