jQuery插件：仿百度搜索下拉框Select -可模糊查询

jQuery插件：一个仿百度搜索分页插件，使用简单，兼容很多框架

参照select2、autocomplete

这里可以直接下载demo，也可以在线演示效果。

在线演示 | 在线下载

js调用代码

//简易调用
$('#auto').bigAutocomplete({
	data:data1
});
//title
$('#title').bigAutocomplete({
	data:data2,
	title:'text'
});
//回调方法
$('#callback').bigAutocomplete({
	data:data2,
	title:'text',
	callback:function(row){
		alert(row.text+'|'+row.value);
		console.log(row.text+'|'+row.value);
	},
});
//自定义选择/展示-1
$('#formatItem').bigAutocomplete({
	data:data3,
	title:'text',
	formatItem:function(data, i, row){
		return row.text +' (' +row.form + ')';
	},
	callback:function(row){
		console.log('水果:'+row.text+'; 店铺:'+row.form+'; id:'+row.value);
	},
});
//自定义选择/展示-2
$('#formatSelected').bigAutocomplete({
	data:data3,
	title:'text',
	formatItem:function(data, i, row){
		return row.text +' (' +row.form + ')';
	},
	//默认formatSelected=formatItem,这里formatSelected不同,额外定义
	formatSelected:function(data, i, row){
		return row.text;
	},
	callback:function(row){
		console.log('水果:'+row.text+'; 店铺:'+row.form+'; id:'+row.value);
	},
});
//是否必须绑定data
var value1 = null;
$('#custom').bigAutocomplete({
	data:data3,
	title:'text',
	custom:false,//不允许用户自定义值
	callback: function (row,param){
		//定义custom:false后,如果用户清空值,row就是null
		if(row != null){
			value1 = row.value;
			console.log(value1);
		}else{
			//value1 = row.value;//这样会异常
			value1 = null;
			console.log(value1);
		}
	}
});
//自定义选择/展示-2
$('#width').bigAutocomplete({
	data:data3,
	title:'text',
	width : 130,
	formatItem:function(data, i, row){
		return row.text +' (' +row.form + ')';
	},
	//默认formatSelected=formatItem,这里formatSelected不同,额外定义
	formatSelected:function(data, i, row){
		return row.text;
	},
	callback:function(row){
		console.log('水果:'+row.text+'; 店铺:'+row.form+'; id:'+row.value);
	},
});
//param 自定义参数,动态构建/渲染html时可以用到
$("#param").bigAutocomplete({
	data:data3,
	//url:'/apple/queryByKeywords',//url自行研究,条件限制这里就不写demo了
	title:'text',
	formatItem:function(data, i, row){
		return row.text +' (' +row.form + ')';
	},
	formatSelected:function(data, i, row){
		return row.text;
	},
	callback:function(row,param){
		console.log('param:'+ param + 'value:' + row.value);
	},
	param:1,
});

html代码

	

		
简易调用

	
	

		
title参数

	
	

		
callback参数
(alert 预警)
	
	

		
formatItem参数

	
	

		
formatSelected参数

	
	

		
custom参数

	
	

		
width参数

	
	

		
param参数

	

数据源js代码

var data1 = [{title:'苹果'},{title:'香蕉'},{title:'梨子'},{title:'火龙果'},{title:'芒果'},{title:'菠萝'}];

var data2 = [{value:1,text:'苹果'},{value:2,text:'香蕉'},{value:3,text:'梨子'},{value:4,text:'火龙果'},{value:5,text:'芒果'},{value:6,text:'菠萝'}];

var data3 = [{value:1,text:'apple',form:'世纪苹果店1'},{value:2,text:'Banana',form:'进口店2'},
			{value:3,text:'appleGo',form:'苹果店3'},{value:5,text:'apple',form:'苹果店4'},
			{value:4,text:'appleGo',form:'苹果店5'},{value:6,text:'Banana',form:'进口店店6'},
			{value:8,text:'appleGo1',form:'苹果店7'},{value:7,text:'苹果',form:'苹果店8'}];

当然了，也可以使用ajax异步加载数据，数据格式可以自行设置

/*每次输入值从url通过请求中获取数据*/
$("#productName_"+i).bigAutocomplete({
    url:'www.baidu.com/xxxx',
    title:'title',
});

是不是简单好用的，大家使用时有疑问或问题，或者有需要改进时，可以在下方留言给我哦。