zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Stopping User Manager for UID 121” error
    IDEA——如何再次开启ESLint
    堆排序
    akka-typed(10)
    微慕WordPress小程序专业版v3.0发布
    微慕WordPress小程序增强版v2.0发布
    微慕WordPress小程序开源版v3.6发布
    微慕小程序开源版A标签优化说明
    微信小程序开放「分享到朋友圈」功能
    微信小程序直播安装和开发指南
  • 原文地址:https://www.cnblogs.com/boonya/p/5217278.html
Copyright © 2011-2022 走看看