jQuery类似谷歌自动补全功能

吉俊德
2023-12-01

首先下载:jquery.autocomple.js,下载地址:http://download.csdn.net/detail/jxctx/7379105

样式为:

<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.autocomplete.js"></script>

<style>
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.demoWrap{ border: 1px solid #ccc; padding: 30px; width: auto;}
.mx-autocomplete{ display: none}
.mx-autocompleteWrap{display:inline;}
</style>

<!--下面是例子-->
<div class="form-group">
    <label class="label">银行名称:</label>                        
    <select class="form-unit mx-autocomplete" name="bankCode" id="mmBankCode" placeholder="输入银行名称">
        <option value="all" selected="true">全部</option>
        <#list banks as bank>
        <option value='${bank.bankCode}'>${bank.bankFullName}</option>
        </#list>
</select>                        

</div>

 类似资料: