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

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

参照select2、autocomplete

GitHub https://github.com/StarIL/select-input-autocomplete

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代码

<table>
	<tr>
		<td>简易调用</td><td><input id="auto" class="input-default" autocomplete="off"/></td>
	</tr>
	<tr>
		<td>title参数</td><td><input id="title" class="input-default" autocomplete="off"/></td>
	</tr>
	<tr>
		<td>callback参数</td><td><input id="callback" class="input-default" autocomplete="off"/></td><td>(alert 预警)</td>
	</tr>
	<tr>
		<td>formatItem参数</td><td><input id="formatItem" class="input-default" autocomplete="off"/></td>
	</tr>
	<tr>
		<td>formatSelected参数</td><td><input id="formatSelected" class="input-default" autocomplete="off"/></td>
	</tr>
	<tr>
		<td>custom参数</td><td><input id="custom" class="input-default" autocomplete="off"/></td>
	</tr>
	<tr>
		<td>width参数</td><td><input id="width" class="input-default" autocomplete="off"/></td>
	</tr>
	<tr>
		<td>param参数</td><td><input id="param" class="input-default" autocomplete="off"/></td>
	</tr>
</table>

数据源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',
});

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