搜尋欄模糊查詢特效--jquery外掛
以下是我在實際工作中給客戶做的一個方便搜尋的功能：
在工作中我們用的框架是ETP框架不是主流的SS框架（此處只是說明下，並不影響文章的主要內容，目的是為不知道ETP的人掃除閱讀障礙），如程式碼中的
<%
IndexedCollection dealerInfoIColl = (IndexedCollection) transFlowCtx.getElementAt("dealerInfoIColl");//就是獲取一個包含資料的集合dealerInfoIColl ，然後遍歷出dealerName 如是而已
for (int i = 0; i < dealerInfoIColl.size(); i++) {
KeyedCollection tempKColl = (KeyedCollection) dealerInfoIColl.getElementAt(i);
String dealerName = (String) tempKColl.getValueAt("dealerName");
%>
附程式碼：
<div class="">
<td class="R Ltext" noWrap>經銷商：</td>
<td width="20%" nowrap ><input name="IN_DEALER_NAME" id="tags" value='<%=transFlowCtx.getValueAt("IN_DEALER_NAME")==null?"":transFlowCtx.getValueAt("IN_DEALER_NAME") %>' class="borderinput" type="text" style="width:180px;"/></td>
</div>
==========================
<%@ page language="java" contentType="text/html; charset=utf-8" %>
<script type="text/javascript" src="<%=path%>res/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=path%>res/jquery/jquery-ui/js/jquery-ui-1.8.19.custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="<%=path%>res/jquery/jquery-ui/css/jquery-ui-1.8.19.custom.css" />
<link type="text/css" rel="stylesheet" href="<%=path%>res/jquery/css/layout-default-latest.css" />
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* 防止水平滾動條 */
overflow-x: hidden;
}
/* IE 6 不支援 max-height
* 我們使用 height 代替，但是這會強制選單總是顯示為那個高度
*/
html .ui-autocomplete {
height: 100px;
}
</style>
<script type="text/javascript">
$(function() {
var availableTags = new Array();
<%
IndexedCollection dealerInfoIColl = (IndexedCollection) transFlowCtx.getElementAt("dealerInfoIColl");
for (int i = 0; i < dealerInfoIColl.size(); i++) {
KeyedCollection tempKColl = (KeyedCollection) dealerInfoIColl.getElementAt(i);
String dealerName = (String) tempKColl.getValueAt("dealerName");
%>
availableTags.push('<%=dealerName%>');
<%}%>
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>