Jquery autocomplete 插件示例

通过Jquery autocomplete 插件动态传递输入参数完成自动完成提示：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="com.wlyd.wmscloud.util.ehcache.EhcacheUtil"%>
<%@page import="com.wlyd.wmscloud.persistence.beans.EsUser"%>
<%@page import="com.wlyd.wmscloud.util.finals.Const"%>
<%
    String staticUrl = (String) EhcacheUtil.get("staticUrl");
    String webRoot = request.getContextPath();
    EsUser user = (EsUser) session.getAttribute(Const.SESSION_BACK_USER);
    String operateType=(String)request.getParameter("opt");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JQuery自动补全插件</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/autocomplete/resources/demos/style.css">
  </head>
  <script type="text/javascript">
  function back()
  {
     window.location.href="<%=webRoot%>"+"/pda/index.html";
  }
  $(function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        
        $( "#wmofBatchno" ).autocomplete({
            source :  function(request, response){
                var url="http://www.runoob.com/try/try.php?filename=try_ng_scope_sync&res="+ Math.random(); 
                $.ajax({
                    url: url,
                    dataType: "json",
                    data: {
                        wmofBatchno: request.term,
                    },
                    success: function( data ) {
                      // 模拟返回的数据 
                      response( availableTags );
                    }
                  });
            } 
        });
      });
  </script>
  <body>
   <div class="title">商品批次号自动补全</div> 
    <div class="searchbox">
        <ul>
            <li><input type="button" value="返回" class="btn" onclick="back()" /></li>
            <li><em>商品批次号：</em><span><input type="text" class="txt" id="wmofBatchno" name="wmofBatchno" value=""/></span>
        </ul>
    </div>
  </body>
</html>
posted on 2016-02-25 15:53 boonya 阅读(365) 评论(0) 编辑收藏举报