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>
  • 相关阅读:
    beforeRouteLeave 实现vue路由拦截浏览器的需求,进行一系列操作 草稿保存等等
    VUE 路由变化页面数据不刷新问题
    vue 监听 watch 使用
    vue-cli配置文件详解
    vue-cli脚手架中webpack配置基础文件详解
    Dbus组成和原理
    NUMA架构的优缺点
    define 的全部使用方法
    敏捷(Agile)——“说三道四”
    Linux 内核模块编译 Makefile
  • 原文地址:https://www.cnblogs.com/boonya/p/5217278.html
Copyright © 2011-2022 走看看