yii2下拉框带搜索功能
简单的小功能,但是用起来还是蛮爽的。分享出来让更多的人有更快的开发效率,开开心心快乐编程。
作者:白狼 出处:http://www.manks.top/yii2_dropdown_search.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有。都说到这个点上了,我们赶紧使用composer进行安装吧。
不急,先来看看效果图是啥样的,不然都没心情没欲望看下去。原文自带图片,可参考。
啥玩意,不感兴趣?继续看嘛,看完再操作一边才能觉得好在哪里。
有木有感觉很帅气,当然啦,远远不止,还很上档次用起来效果也是杠杠的有木有。
好了好了,抓紧时间安装,不然聊起来真是没完没了。
composer require kartik-v/yii2-widget-select2 "@dev"
#特别说明,因为这里安装的dev版本,也就是开发版本,不稳定版本,如果你的项目是git托管的,composer安装下来之后这里记得删掉 \vendor\kartik-v\yii2-widget-select2目录下的.git文件,不然你提交不上去的哦
等他个大概5分钟的样子差不多了,安装就好了,然后我们就可以像下面一样开始使用了
//如果你的表单是ActiveForm,请使用
use kartik\select2\Select2;
//$data是键值对数组哦,key-value ,下面所声明的所有$data均为键值对数组,以该数组为例
$data = [2 => 'widget', 3 => 'dropDownList', 4 => 'yii2'];
echo $form->field($model, 'title')->widget(Select2::classname(), [
'data' => $data,
'options' => ['placeholder' => '请选择 ...'],
]);
//如果你的表单是非ActiveForm,可以参考下面的
use kartik\select2\Select2;
echo Select2::widget([ 'name' => 'title',
'data' => $data,
'options' => ['placeholder' => '请选择...']
]);
非ActiveFomr生成的更新数据的时候就需要默认选中,好办,加value值即可
use kartik\select2\Select2;
echo Select2::widget([
'name' => 'title',
'value' => 2,
'data' => $data,
'options' => ['placeholder' => '请选择...']
]);
#但是如果你的表单是ActiveForm生成的,但是往往字段不是表字段怎么办呢?更好办啦,以上面的为例,你只需要指定$model->title = ['title1', 'title2'];即可
yii2下拉框带搜索功能的更多相关文章
- yii2组件之下拉框带搜索功能(yii-select2)
简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有. ...
- 多选下拉框带搜索(aps.net)
自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...
- jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)
第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...
- EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片
1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...
- Yii2下拉框实现
详细介绍yii2下拉框的实现方法,以商品分类的下拉框为例: 第一种方法:使用Html的activeDropDownList(),该方法的优点是:可以自定义下拉框的样式.具体实现如下: 1.控制器中,获 ...
- java简单的实现搜索框的下拉显示相关搜索功能
最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...
- checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果
前台代码 01.<html xmlns="http://www.w3.org/1999/xhtml"> 02.<head runat="server&q ...
- 让Jayrock插上翅膀(加入输入输出参数注释,测试页面有注释,下拉框可以搜索)
继上一篇文章介绍了Jayrock组件开发接口的具体步骤和优缺点之后,今天给大家带来的就是,如何修复这些缺点. 首先来回顾一下修复的缺点有哪些: 1.每个接口的只能写大概的注释,不能分开来写,如接口的主 ...
- element-UI中el-select下拉框可搜索时候,filter-method自定义搜索方法
使用element-UI框架的使用,我们经常使用el-select下拉框,很多时候还需要使用可搜索的下拉框,然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法, ...
随机推荐
- AOP的实现机制--转
原文地址:http://www.iteye.com/topic/1116696 1 AOP各种的实现 AOP就是面向切面编程,我们可以从几个层面来实现AOP. 在编译器修改源代码,在运行期字节码加载前 ...
- 使用Oracle调度程序自动完成任务
1. 创建作业.计划和时间表 2. 创建轻量级作业 3. 使用作业链执行一系列相关任务 4. 创建窗口和作业类 5. 使用高级调度程序概念确定作业优先顺序 Reference 实验演示准备: --业务 ...
- Sybase数据库,普通表修改分区表步骤
本文目标:指导项目侧人员再遇到此类改动需求时可以自己参照更改.需求:Sybase数据库,普通表t_jingyu修改为按天分区的分区表. 1.sp_help查看t_jingyu的表结构,索引等信息 sp ...
- struts2学习笔记--拦截器(Interceptor)和登录权限验证Demo
理解 Interceptor拦截器类似于我们学过的过滤器,是可以在action执行前后执行的代码.是我们做web开发是经常使用的技术,比如权限控制,日志.我们也可以把多个interceptor连在一起 ...
- 通过手动创建统计信息优化sql查询性能案例
本质原因在于:SQL Server 统计信息只包含复合索引的第一个列的信息,而不包含复合索引数据组合的信息 来源于工作中的一个实际问题, 这里是组合列数据不均匀导致查询无法预估数据行数,从而导致无法选 ...
- GitHub托管BootStrap资源汇总(持续更新中…)
Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...
- Chrome开发者工具详解(5)-Application、Security、Audits面板
Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...
- 在Mac上使用Visual Studio Code开发/调试.NET Core代码
.Net Core 1.0终于发布了,Core的一大卖点就是跨平台.这个跨平台不只是跨平台运行,而且可以跨平台开发.今天抽空研究了下在Mac下如何使用VS Code来开发.NET Core程序,并且调 ...
- 记dynamic的一个小坑 -- RuntimeBinderException:“object”未包含“xxx”的定义
创建一个控制台程序和一个类库, 在控制台创建一个匿名对象,然后再在类库中访问它,代码如下: namespace ConsoleApplication1 { class Program { static ...
- NanUI for Winform 使用示例【第一集】——山寨个代码编辑器
NanUI for Winform从昨天写博客发布到现在获得了和多朋友的关注,首先感谢大家的关注和支持!请看昨天本人的博文<NanUI for Winform发布,让Winform界面设计拥有无 ...