JQuery AutoComplate Struts2 后台分页 中文提示

 JQuery  AutoComplate 插件下载地址：

 

       http://docs.jquery.com/UI/Autocomplete 在这个下载地址中提供了Demo，使用的朋友可以查看Demo

 

Demo效果图主要是一个中文和数字编号

 

       

 

 

需要的CSS文件和JavaScript文件

 

  

<script  type='text/javascript'src='<=path>/js/jquery1.4.2min.js'> </script> 
<script  type='text/javascript'src='<=path>/js/jquery.autocomplete.js'>
</script>
<link rel="stylesheet" type="text/css"
			href="<%=path%>/css/jquery.autocomplete.css" />
		

 

 

编写编号提示JavaScript代码和中文提示代码

  

  

<script type="text/javascript">
		$(document).ready(function(){
			$("#username").autocomplete("queryAuto.action",{
				max: 10, //列表包含最大记录数
				minChars:1,//输入最小字符
				scroll: true,	
				matchContains: true,
                matchCase:false,
				width:150,
				scrollHeight: 100,
				dataType:"json",
				parse: function(data) { //加入对返回的json对象进行解析函数，函数返回一个数组 
                       return $.map(data, function(row) {
                         return {
                                    data: row, //通过此参数设置formatItem函数的return值
                                    value: row.id, //等同于formatMatch函数中return的内容
                                    result: row.id //等同于formatResult函数中return的内容
                               }
                           });
                 },
                /*
                parse:function(data){
               		var rows = [];
               		//var resultData = data.content;
               		var d = data;
               		alert(d[0].name);
               		for(var i = 0; i < d.length;i++){
               			rows[rows.length] = {
               				data:d[i].id,
               				value:d[i],
               				result:d[i].id
               			};
               		}
               		return rows;
               },   
                */
                //每次调用该函数，将返回值以列表的形式包含在下拉列表
                formatItem: function(row, i, n) {
                   return row.id+" "+row.name;     
                },
                formatResult:function(row,i,max){
                     return row.id;　　　
                  }
			});
			
			$("#chname").autocomplete("queryNameChinese.action",{
				max: 10, //列表包含最大记录数
				minChars:1,//输入最小字符
				scroll: false,	
				matchContains: true,
                matchCase:false,
				width:150,
				scrollHeight: 100,
				dataType:"json",
				parse: function(data) { //加入对返回的json对象进行解析函数，函数返回一个数组 
                       return $.map(data, function(row) {
                         return {
                                    data: row, //通过此参数设置formatItem函数的return值
                                    value: row.name, //等同于formatMatch函数中return的内容
                                    result: row.name //等同于formatResult函数中return的内容
                               }
                           });
                 },
                 //每次调用该函数，将返回值以列表的形式包含在下拉列表
                formatItem: function(row, i, n) {
                   return row.name;     
                },
                formatResult:function(row,i,max){
                     return row.name;　　　
                  }
			});
		});
	</script>

Json 数据格式及内容，其中的row.id的id在代码中代表编号，row.name代表姓名

[{"id":"2001","name":"王海"},{"id":"2002","name":"王成凯"},{"id":"2003","name":"王雨"},{"id":"2004","name":"王蒙"},{"id":"2005","name":"王依"},{"id":"2006","name":"王静"},{"id":"2007","name":"王酷"},{"id":"2008","name":"王过洋"},{"id":"2009","name":"王金龙"},{"id":"2010","name":"王浩"},{"id":"2011","name":"王海"}]
 

 

 

html 代码

   

<h3>ID编号匹配</h3>
<input type="text" style="width:150px;"id="username">

<h4>中文姓名匹配</h4>
<input type="text" id="chname">

 

Demo中所遇到的问题：

   1  就是在IE8下面当超过指定的显示的内容的时候不能出现滚动条，需要修改源码源码的736行

      

if($.browser.msie && ((typeof document.body.style.maxHeight === "undefined") || (document.body.style.maxHeight == '')))

 

   2   在火狐浏览器中，当开始输入法的时候输入中文时不会触发事件，需要修改源码调用其内部函数，在源码199行加入以下代码：

   

.bind("input", function() {
		//  firefox input输入栏发生字符变化时，重新进行查询 （调用其内部的onChange函数），这里主要针对firefox而言
		onChange(0, true);
		});

 

       

评论

1 楼 JavaYwsEye 2013-08-07  

楼主，你这代码不能运行！
parse 方法中的row undefine,data有数据！