搜索栏模糊查询特效--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>

另推荐两篇相关博客，以增进理解：http://blog.csdn.net/zhs954838550/article/details/8896965   http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/2534262.html