自动完成下拉框 Select2 关键字搜索的实例(本地数据与异步获取)
2014-09-09 10:58
866 查看
最终效果
首先我们要有一个基础的文本框
<input name="test" type="hidden" id="userSelect" style="width: 600px" value="上海^漳州" />
使用本地数据的写法
$('#userSelect').select2({ placeholder : "请输入", minimumInputLength : 1, multiple : true, separator : "^", // 分隔符 maximumSelectionSize : 5, // 限制数量 initSelection : function (element, callback) { // 初始化时设置默认值 var data = []; $(element.val().split("^")).each(function () { data.push({ id: this, text: this }); }); callback(data); }, createSearchChoice : function(term, data) { // 创建搜索结果(使用户可以输入匹配值以外的其它值) return { id: term, text: term }; }, formatSelection : function (item) { return item.id; }, // 选择结果中的显示 formatResult : function (item) { return item.id; }, // 搜索列表中的显示 data: { results: [ { id: "北京", text: "bj beijin 北京" }, { id: "厦门", text: "xm xiamen 厦门" }, { id: "福州", text: "fz fuzhou 福州" } ] } });
使用异步数据的写法
脚本
$('#userSelect').select2({ placeholder : "请输入", minimumInputLength : 1, multiple : true, separator : "^", // 分隔符 maximumSelectionSize : 5, // 限制数量 initSelection : function (element, callback) { // 初始化时设置默认值 var data = []; $(element.val().split("^")).each(function () { data.push({id: this, text: this}); }); callback(data); }, createSearchChoice : function(term, data) { // 创建搜索结果(使用户可以输入匹配值以外的其它值) return { id: term, text: term }; }, formatSelection : function (item) { return item.id; }, // 选择结果中的显示 formatResult : function (item) { return item.id; }, // 搜索列表中的显示 ajax : { url : "test-api", // 异步请求地址 dataType : "json", // 数据类型 data : function (term, page) { // 请求参数(GET) return { q: term }; }, results : function (data, page) { return data; }, // 构造返回结果 escapeMarkup : function (m) { return m; } // 字符转义处理 } });
服务端(这里以 Laravel 为例)
Route::get('test-api', function () { $q = Input::get('q'); // do something ... return array( // 'more' => false, 'results' => array( array('id' => '北京', 'text' => 'bj beijin 北京'), array('id' => '厦门', 'text' => 'xm xiamen 厦门'), array('id' => '福州', 'text' => 'fz fuzhou 福州'), ), ); });
相关文章推荐
- YII框架中使用jQuery UI : 自动完成(Autocomplete)--本地数据和使用ajax获取远程数据实例
- ligerui下拉框自动完成,解决源码无法使用本地数据过滤
- Ajax获取php返回json数据动态生成select下拉框的实例
- 获取自动增涨列的表中添加完成后的数据
- php & ajax 小例子——仿百度搜索自动完成下拉框
- layui监听select下拉框获取数据通过doT.js加载页面多选框
- ajax异步获取数据,动态添加select标签中的option
- 【网络爬虫】给关键字获取百度知道搜索数据的网络爬虫
- Vue-cli项目获取本地json文件数据的实例
- vue自动完成搜索功能的数据请求处理
- Excel中HLOOKUP函数实例(一):自动判断并获取数据
- yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
- ajax获取本地数据实例
- .Net MVC3 中前台异步获取json数据的实例
- jQuery 关键字搜索(自动完成效果,autocomplete)
- 通过Ajax从Servlet获取数据完成登录实例
- Echarts异步获取数据,刷新实例
- Zookeeper实例原生API--异步获取节点数据
- bootstrap实现的类似百度搜索的输入框自动完成功能(动态获取数据库的值)
- yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析