zoukankan      html  css  js  c++  java
  • 使用动态数据的autocomplete标签

        autocomplete标签支持Ajax方式获取动态数据,如果下拉框庞大,只能使用动态数据。

     1 <body>
     2 
     3 
     4 <s:url id="dataUrl" value="/autocompleteAjaxData.jsp" />       <!-- 获取数据的URL -->
     5 
     6 请选择国家:
     7 <struts:autocompleter name="country" theme="ajax" href="%{dataUrl}"
     8     loadOnTextChange="true" loadMinimumCount="1" autoComplete="false"
     9     showDownArrow="true" indicator="indicator"  />             <!-- 指定href、指定indicator -->
    10     <img id="indicator" src="images/loading.gif" />            <!-- indicator图片 -->
    11 
    12 
    13 </body>

        href属性指定获取数据的URL。该URL会根据当前输入的内容动态地筛选内容,返回下拉框数据。indicator属性可以为下一个图片或者一段文字,autocomplete获取数据时会显示indicator。获取数据的URL代码如下:

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
     2 <%!Log log = LogFactory.getLog(getClass());%>
     3 <%
     4     out.clear();                                       // 清空所有输出
     5 
     6     request.setCharacterEncoding("UTF-8");             // 设置request编码
     7 
     8     response.setHeader("Pragma", "no-cache");          // 禁止缓存
     9     response.setHeader("Cache-Control", "no-cache");   // 禁止缓存
    10     response.setDateHeader("Expires", 0);              // 禁止缓存
    11 
    12     String[] countries = { "Afghanistan", "Aland Islands", "Albania",  // 国家代码
    13             "Algeria", "American Samoa (USA)", "Andorra", "Angola",
    14             "Anguilla", "Antarctica", "Antigua and Barbuda",
    15             "Argentina", "Armenia", "Aruba", "Australia", "Austria",
    16             "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh",
    17             "Barbados", "Belarus", "Belgium", "Belize", "Benin",
    18             "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina",
    19             "Botswana", "Bouvet Island", "Brazil",
    20             "British Indian Ocean Territory (UK)", "Brunei Darussalem",
    21             "Bulgaria", "Burkina Faso", "Burundi",};
    22 
    23     String country = request.getParameter("country");    // 当前autocomplete已填写的内容
    24 
    25     if (country == null)                                 // 如果没有填写,当做空字符串
    26         country = "";
    27 
    28     StringBuffer buffer = new StringBuffer();            // StringBuffer
    29 
    30     for (int i = 0; i < countries.length; i++) {         // 遍历所有的国家
    31         if (countries[i].toLowerCase()
    32             .startsWith(country.toLowerCase())) {
    33             if (buffer.length() != 0)
    34         buffer.append(",");
    35             buffer.append("['" + countries[i] + "']");   // 如果包含已输入的字符串则显示
    36         }
    37     }
    38     
    39     Thread.sleep(500);                                   // 为演示indicator,让数据延迟0.5秒钟显示
    40 
    41     out.print("[" + buffer + "]");                       // 输出数据
    42 
    43     log.info("queryString: " + request.getQueryString() + ", result: ["
    44             + buffer + "]. ");
    45             
    46 %>

        autocomplete标签能够接受JSON格式的数据,因此该JSP会把数据以JSON格式输出,例如:[['Andorra'],['Angola'],[Anguilla']]

  • 相关阅读:
    [Swift]LeetCode380. 常数时间插入、删除和获取随机元素 | Insert Delete GetRandom O(1)
    [Swift]LeetCode378. 有序矩阵中第K小的元素 | Kth Smallest Element in a Sorted Matrix
    说说心声------ 一些经历
    安装eclipse maven插件m2eclipse No repository found containing
    苹果浏览器实战(三)
    CSDN挑战编程——《绝对值最小》
    高可用技术工具包 High Availability Toolkit
    jstl 标签 循环 序号
    坚向的ViewPager,上下滑动的组件,android上下滑动 VerticalPager
    Php socket数据编码
  • 原文地址:https://www.cnblogs.com/Nickzerui/p/4624325.html
Copyright © 2011-2022 走看看