jQuery tags input 使用
来源:互联网 发布:淘宝靠谱的男装外贸店 编辑:程序博客网 时间:2024/06/05 19:51
由于项目中想使用tagsinput添加数据,找了很多资源,最终在github上找到开源的项目:
http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
1、对于只是添加一个text,就很简单。直接在javascript中使用
$('input').tagsinput('add', 'some tag');
2、如果是想添加对象,那么就稍微复杂一点:
首先在<input>标签中不能加 data-role='tagsinput'属性。
然后在在javascript代码中:
var organization = new Bloodhound(
{
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'Resources/xenon/assets/organization.json'//json文件可以是空的,应该只是为了能够保存
});
organization.initialize();//初始化
$('#field-organizationresult').tagsinput({
itemValue: 'id',
itemText: 'text',
typeaheadjs: {
name: 'organization',
displayKey: 'text',//tagsinput显示的列
source: organization.ttAdapter()
}
});
$('#field-organizationresult').tagsinput('add', {'id':json.id,'text':json.name});//在tagsinput中添加一个对象
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'Resources/xenon/assets/organization.json'//json文件可以是空的,应该只是为了能够保存
});
organization.initialize();//初始化
$('#field-organizationresult').tagsinput({
itemValue: 'id',
itemText: 'text',
typeaheadjs: {
name: 'organization',
displayKey: 'text',//tagsinput显示的列
source: organization.ttAdapter()
}
});
$('#field-organizationresult').tagsinput('add', {'id':json.id,'text':json.name});//在tagsinput中添加一个对象
$('input').tagsinput('add', 'some tag');
0 0
- jQuery tags input 使用
- jQuery tags input 使用
- HTML5-关于如何使用<input>tags~汇总
- jQuery Tags Input Plugin(添加/删除标签插件)
- jQuery Tags Input Plugin(添加/删除标签插件)
- 网页标签功能插: jQuery tags input 翻译api
- thinkphp整合tagit插件和jquery input tags几个插件比较
- 注册 ng-tags-input 失败
- input宽度自适应[使用jquery]
- 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录
- 前端多条件选择插件Tags Input
- jquery的date input日期组件使用
- jquery validate 插件使用隐藏 input
- 使用jquery获取<input>输入的值
- vim+tags 安装使用
- struts-tags的使用
- struts2-jquery, struts-jquery-grid-tags
- jquery easyui - 使用jquery给input赋值,取值
- poj 3667 Hotel 【线段树区间合并】
- 理解矩阵
- SDCC 2015讲师专访精彩集锦:程序员界“香饽饽”、大神级人物都在!
- 【iOS开发系列】繁简转换
- AtomicBoolean的用法
- jQuery tags input 使用
- SmartSVN安装破解 for mac
- CORS 解决跨域访问问题
- 微信支付-公众号支付-JSAPI调用(Java)
- Android Studio 编码设置,解决Android Studio项目运行时乱码问题
- android开发中碰到的问题总结(保持更新)
- android AsyncTask介绍
- Android手机循环切换图片全屏播放
- hdoj 1728 逃离迷宫【BFS】