bootstrap自动完成插件Typeahead.js的用法之ajax请求

官方对Typeahead.js的介绍太简单了,对于新手来说有些吃力,项目中使用了这个插件,困惑了两天,终于才搞定它的ajax用法。官方示例虽然可以使用,但从remote url 获取数据的时候,无法传递过多的自定义参数,如要根据省份、城市信息来获取当前城市的小区信息,这个时候我们就要想办法把省份和城市信息也同时发给后端才可以。这样可以过滤大部分的无用信息,产少数据量的产生。


js代码

$(function(){	
/*
	var filterResult = new Bloodhound({
		datumTokenizer: Bloodhound.tokenizers.whitespace,
		queryTokenizer: Bloodhound.tokenizers.whitespace,
		initialize: false,
		remote: {
			url: '/getCommunityList?province_code=' + $("#province_code").val() + '&q=%QUERY',
			wildcard: '%QUERY'
		}
	});
*/	
	
	$('#community_name').typeahead({
			highlight: true,
			hint: true,
			minLength: 1
		},
		{

			name: 'result-list',
			limit: 10,
			async: true,
			source: function (query, processSync, processAsync) {
					//processSync(['This suggestion appears immediately', 'This one too']);
					var params = {
						province_code: $("#province_code").val(),
						city_code: $("#city_code").val(),
						area_code: $("#area_code").val(),	
						q: query
					};
					
					if (params.province_code == '' || params.city_code == '' || params.area_code == '' || params.q == '') {
						return false;	
					}
					
					$.post('/getCommunityList', params, function(json) {
						if (json.status == '0') {
							layer.msg(json.info);	
						} else {
							return processAsync(json.data);	
						}
					});
                },
			display:function(item){
						return item.name
					},
			templates: {
			  suggestion: function (item){
							return '

' + item.name + '

'; }, notFound: '
未找到小区,请确认区域信息!
', header: '

可使用键盘↑↓选择。

', // footer: '

支持剪头移动选择项

' } } ); //结果项被选中事件 $('#community_name').bind('typeahead:select', function(ev, suggestion) { $("#address").html(suggestion.address); // console.log(suggestion); }); //鼠标移动到选择项事件 $('#community_name').bind('typeahead:cursorchange', function(ev, suggestion) { // console.log(suggestion); }); $('#community_name').bind('typeahead:autocomplete', function(ev, suggestion) { console.log(suggestion); }); })

注意上面的 async: true 配置,还有source回调函数要使用三个参数。

开发jquery插件

jquery插件开发文档:http://www.tripfox.com.cn/node/64

以下为一简单的实例:

chajia.js:

(function($) {
//录入框点击事件
$.fn.alertWhileClick = function() {

$(this).click(function(){
window.console.log('execute click event');
alert($(this).val());
});

window.console.log('ok2');
}

//获取页面最大div的最大高度
$.fn.maxHeight = function(){
var max = 0;

this.each(function(){
window.console.log('a');
max = Math.max(max, $(this).height());
});
return max;
}
})(jQuery);

//插件用法
$(function(){

$('#login_username').alertWhileClick();

var tallest = $('div').maxHeight();
alert(tallest);
})

自定义jquery validate 插件的默认提示语

法一:

一、默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10 Continue reading