您的位置: 首页  >  文章  >  jQuery UI Autocomplete ajax动态赋值实例

jQuery UI Autocomplete ajax动态赋值实例

分类: 文章 • 2024-04-08 21:29:04

源码下载：https://git.oschina.net/paincupid/springmvc.git

下载的应用环境：spring STS, jdk1.7,pivotal

下载后的访问地址: http://localhost:8080/springmvc/jsp/widget/autocomplete-orgrinal.jsp


[javascript] view plain copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>  
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path;  
  6. %>  
  7. <html lang="us">  
  8. <head>  
  9.     <meta charset="utf-8">  
  10.     <title>jQuery UI Example Page</title>  
  11.     <link type="text/css" href="<%=basePath%>/resources/css/jquery-ui/jquery-ui.css" rel="stylesheet" />  
  12.     <style>  
  13.     body{  
  14.         font: 62.5% "Trebuchet MS", sans-serif;  
  15.         margin: 50px;  
  16.     }  
  17.     select {  
  18.         width: 200px;  
  19.     }  
  20.     </style>  
  21. </head>  
  22. <body>  
  23.   
  24. <h1>Welcome to jQuery UI!</h1>  
  25.   
  26. <h2 class="demoHeaders">Autocomplete</h2>  
  27. <div>  
  28.     <input id="autocomplete" title="type "a"">  
  29. </div>  
  30.   
  31. <h2 class="demoHeaders">Autocomplete Ajax</h2>  
  32. <div>  
  33.     <input id="autoByAjax" title="type "a"">  
  34.     <input id="autoByAjaxVal"  type="hidden">  
  35.     <button id="btn" type="button">submit</button>  
  36. </div>  
  37.   
  38.   
  39. </body>  
  40. </html>  
  41.   
  42.   
  43. <script type="text/javascript" src="<%=basePath%>/resources/js/jquery/jquery-1.11.3.min.js"></script>  
  44. <script type="text/javascript" src="<%=basePath%>/resources/js/jquery-ui/jquery-ui.js"></script>  
  45. <script>  
  46. $(function(){  
  47.     var dataArray=[];  
  48.     var option = {  
  49.             max: 12,    //列表里的条目数  
  50.             minChars: 0,    //自动完成**之前填入的最小字符  
  51.             width: 400,     //提示的宽度，溢出隐藏  
  52.             scrollHeight: 300,   //提示的高度，溢出显示滚动条  
  53.             matchContains: false,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示  
  54.             autoFill: true,    //自动填充  
  55.             minLength: 0,  
  56.             select: function (event, ui) {  
  57.                 $("#autoByAjax").val(ui.item.label); // display the selected text  
  58.                 $("#autoByAjaxVal").val(ui.item.id); // save selected id to hidden input  
  59.             }  
  60.     };  
  61.     $.ajax({  
  62.         url: "<%=basePath%>/formWidget/getPersonDropDownTips.json",  
  63.         type: "GET",  
  64.         dataType: "json",  
  65.         success: function(data){  
  66.             if(data.success){  
  67.                 var reslist = data.result;  
  68.                 for(var i=0; i<reslist.length; i++){  
  69.                     var vo = reslist[i];  
  70.                     dataArray.push({id :vo.id, label: vo.name+"a"});  
  71.                 }  
  72.                   
  73.             }  
  74.         }  
  75.           
  76.     });  
  77.       
  78.     //$("#autoByAjax").autocomplete({source: dataArray}, option);  
  79.     $("#autoByAjax").autocomplete({source: dataArray}, option).on('focus', function() { $(this).keydown(); });  
  80.   
  81.     $("#btn").click(function(){  
  82.         var v = $("#autoByAjaxVal").val();  
  83.         alert(v);  
  84.     });  
  85. });  
  86.   
  87. var availableTags = [  
  88.     "ActionScript",  
  89.     "AppleScript",  
  90.     "Asp",  
  91.     "BASIC",  
  92.     "C",  
  93.     "C++",  
  94.     "Clojure",  
  95.     "COBOL",  
  96.     "ColdFusion",  
  97.     "Erlang"  
  98. ];  
  99. $( "#autocomplete" ).autocomplete({  
  100.     source: availableTags  
  101. });  
  102.   
  103. </script>  


jQuery UI Autocomplete ajax动态赋值实例jQuery UI Autocomplete ajax动态赋值实例jQuery UI Autocomplete ajax动态赋值实例


转载请注明：http://blog.****.net/paincupid/article/details/50551771

相关推荐