通过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>