Jquery autocomplete 插件示例

时间：2021-01-28 05:56:58

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

相关文章