• 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>
  • 相关阅读:
    MFC中DoDataExchange()的作用
    图片下面出现空白像素的问题解决
    nginx 的 autoindex on首页不显示的问题 按照下面几行要写上不然不行
    配置 PHP 的 Session 存储到 Redis
    redis4安装
    jumpserver安装
    mysql命令参数详解
    定制LNMP的RPM包
    NTP原理
    内网环境NTP服务及时间同步(CentOS6.x)配置和部署
  • 原文地址:https://www.cnblogs.com/boonya/p/5217278.html
Copyright © 2020-2023  润新知