页面用到自动完成功能及需要taginput控件去展示,查资料的过程中发现

有两个类似的jQuery类库,到现在我也没搞明白它们两个有啥关联,jquery.tagsinput.js和bootstrap-tagsinput.js,后者在github上有(https://github.com/bootstrap-tagsinput/bootstrap-tagsinput),官网地址:http://jquery-plugins.net/bootstrap-tags-input;

前者的用法

$(selector).tagsInput({
'autocomplete_url': url_to_autocomplete_api,//这个参数可以试url或者js方法
'autocomplete': { option: value, option: value},//这个参数只有当使用旧版的autocomplete类库才有用,对集成到JQuery.ui中的无效
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
'onAddTag':callback_function,
'onRemoveTag':callback_function,
'onChange' : callback_function,
'removeWithBackspace' : true,
'minChars' : 0,
'maxChars' : 0 //if not provided there is no limit,
'placeholderColor' : '#666666'
});

  这里有个坑 autocomplete补充的下拉,是个对象,select的option会有 value和label,当我们点击选中的时候会只会讲value 传递个taginput,因为taginput只能是字符串,没有对对象进行处理,所有只能修改源码,处理value是个对象的情况(需要处理的问题有两点,一是taginput的显示字段,另一个是我们需要取到的值,因为每次点击autocomplete的下拉框都会触发taginput的addTag方法,因此可以直接修改addtag方法)

taginput ,complete使用笔记的更多相关文章

  1. Code Complete阅读笔记(三)

    2015-05-26   628   Code-Tuning Techniques    ——Even though a particular technique generally represen ...

  2. Code Complete阅读笔记(二)

    2015-03-06   328   Unusual Data Types    ——You can carry this technique to extremes,putting all the ...

  3. Code Complete阅读笔记(一)

    代码大全也读了好几个月了,一开始读中文版,到现在慢慢尝试着读原版,确实感受到了"每天进步一点点"的魅力.遗憾的是没有从一开始就做阅读记录,总有不能尽兴和思路不清之感.确实,就像项目 ...

  4. Udemy - Angular 2 - The Complete Guide 笔记

    1. install > npm install -g angular-cli 2. create app > ng new first-app 3. build app > cd ...

  5. 【刷题笔记】LeetCode 222. Count Complete Tree Nodes

    题意 给一棵 complete binary tree,数数看一共有多少个结点.做题链接 直观做法:递归 var countNodes = function(root) { if(root===nul ...

  6. Code Complete 笔记—— 第二章 用隐喻来更充分理解软件开发

    在这章里面,提到的隐喻,类同于比喻(建模)的方法的去理解软件开发. 隐喻的优点在于其可预期的效果能被所有人所理解.不必要的沟通和误解也因此大为减低,学习与教授更为快速,实际上,隐喻是对概念进行内在化和 ...

  7. Code Complete 笔记—— 第一章

    软件的构建的主要流程: 定义问题 ( Problem Definition) 需求分析 (Requirements Development) 规划构建 (construction planning) ...

  8. Modular Rails: The complete Guide to Modular Rails Applications 笔记

    fix SamuraiCRM/engines/core/test/dummy/config/routes 修改如下 Rails.application.routes.draw do mount Sam ...

  9. gradle学习笔记

    一直想着花时间学习下gradle,今天有空.入门一下.参考:极客学院gradle使用指南,官方文档:gradle-2.12/docs/userguide/installation.html,以及百度阅 ...

随机推荐

  1. asp.net 解决 "回发或回调参数无效" 一些常见解决方案

    一.回发或回调参数无效,出现下图错误, 常见解决方案: 1.在页面的<%@ Page Language="C#"  AutoEventWireup="true&qu ...

  2. gulp入门教程

    第1步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 nodejs.org,下载完成后直接运行程序,就一切准备就绪.npm会随着安装包一起安装,稍后会用到它. 为了确保Nod ...

  3. log4net RemotingAppender 的配置

    Before you even start trying any of the alternatives provided, ask yourself whether you really need ...

  4. 下载历史版本App超详细教程

    有些时候我们需要下载旧版本的 App 进行研究或者其他用途,然而在 iOS 下,苹果的 App Store 里面默认只能下载最新版本的 App,对滴,就是这么任性,不服不行.然而在 Android 里 ...

  5. NFA引擎匹配原理

    1       为什么要了解引擎匹配原理 一个个音符杂乱无章的组合在一起,弹奏出的或许就是噪音,同样的音符经过作曲家的手,就可以谱出非常动听的乐曲,一个演奏者同样可以照着乐谱奏出动听的乐曲,但他/她或 ...

  6. 在input中实现点点点与当鼠标移上去时显示剩余的字

    项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示 ...

  7. axis2开发webservice入门到精通

    1,准备工作: 首先我们要下载:axis2-1.4.1-war(发布webservice),axis2-1.4.1-bin.zip(webservice调用使用的各种包). 下载好了,把axis2-1 ...

  8. scala 打印一个乘法口诀表 (<<scala 编程>> P87)

    (for(i <- 1 to 9;j <- 1 to i; s = s"$j*$i=${i*j}\t") yield {if(j==1) s"$s\n&quo ...

  9. Linux x64 下 Matlab R2013a 300 kb 脚本文件调试的 CPU 占用过高问题的解决办法

    (1) 系统+软件版本 CentOS 6.5 (Final), 64 位,内核initramfs-2.6.32-431.5.1.el6.x86_64, MATLAB Version: 8.1.0.60 ...

  10. TEA(Tiny Encryption Algorithm)

    简介 TEA是一种简单高效的加解密算法,以速度快,实现简单著称.TEA算法每一次可以操作64-bit数据,采用128-bit作为key,算法采用迭代的形式,推荐的迭代轮数是64,最少32. 代码(默认 ...