<link href="../css/select2.min.css" rel="stylesheet" />

<script src="../js/jquery-1.8.2.min.js"></script>

<script src="../js/select2.min.js"></script>
<script src="../js/zh-CN.js"></script>

<select class="js-data-example-ajax" id="liaison" ></select>

$("#liaison").select2({
ajax: {
url: "../../weixin/ashx/outside/applicat.ashx?action=liaison",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // 输入的值
page: params.page
};
},
processResults: function (data, params) {

params.page = params.page || 1;

return {
results: data.items, //返回值格式[{id:1,text:'text'},{id:2,text:'text'}]如果不按照此格式数据可能显示不出来,或者再次选择时值赋不上。
pagination: {
more: (params.page * 10) < data.total_count
}
};
},
cache: true
},
placeholder: '联络人搜索',
escapeMarkup: function (markup) { return markup; }, //自定义显示
minimumInputLength: 2, //输入长度
templateResult: formatRepo,
language: "zh-CN",
templateSelection: formatRepoSelection
});

function formatRepo(repo) {
if (repo.loading) {
return repo.text;
}

var markup = "<div class='select2-result-repository clearfix'>" +
// "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.text + "</div>";
//if (repo.description) {
// markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
//}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.name + "--" + repo.depname + " </div>" +
//"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
//"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";

return markup;
}

function formatRepoSelection(repo) {
return repo.name || repo.text;
}

取值----------------------------$("#liaison").select2("data")[0].text

赋值----------------------------- $("#liaison").append(new Option("Jquery", 10001, false, true));

select2的用法的更多相关文章

  1. jQuery的下拉选select2插件用法

    1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...

  2. select2插件用法

    1.修改默认查询方法,使其可以根据value查询 this.element.select2({ allowClear: true, matcher: function (term, text, ele ...

  3. 01:jQuery的下拉选select2插件用法

    1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...

  4. 下拉框插件select2的使用

    它的优点有: 样式还算好看,支持多选,支持索搜 下面来介绍下select2的用法 1.最简单的用法 只需要加载css和js即可使用 <select name="" id=&q ...

  5. 非常实用的select下拉框-Select2.js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  6. select2的基本用法

    公司有个项目需要用到类似百度搜索功能的下拉框,自然想到使用select2. 先看下select2的效果图,如下: 下来简单介绍下这个控件的基本用法,主要简单介绍下远程加载数据: 1.首先引入需要的文件 ...

  7. Select2 用法

    http://www.cnblogs.com/wuhuacong/p/4761637.html 2.这个做详细参考 http://www.jianshu.com/p/c5ab74b91b2e 3.ht ...

  8. JS组件系列——Bootstrap Select2组件使用小结

    前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...

  9. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

随机推荐

  1. 自己手写一个queuelink

    代码如下: <?php class QueueLink { private $first_key=0;//最前面的那个元素的键 private $first_value=0;//最前面的那个元素 ...

  2. Dynamic attention in tensorflow

    新代码在contrib\seq2seq\python\ops\attention_decoder_fn.py 和之前代码相比 不再采用conv的方式来计算乘,直接使用乘法和linear 给出了两种at ...

  3. 判断当前的Activity的是否处于栈顶

    lockAppName 是需要判断Activity的全称(包括包名). private boolean getTopApp(Context mContext) { String lockAppName ...

  4. [原]Django-issue(1)---postgresql数据库连接密码错误

    环境: Django==1.9.13 psycopg2==2.7.5 Python 3.6.5 postgresql 1.18.1 配置django的时候出现问题 检查setting,问题点:由于安装 ...

  5. vb编程中的选择结构语句的写法

    1996年,Bohra和Jacopin提出了结构化算法的3中种基本结构:顺序结构.选择结构和循环结构 目前已经得到证明,无论多么复杂的程序,都是由上面的3种基本结构中的一种或者多种的组合构成 在此笔者 ...

  6. UCloud 的安全秘钥 (计蒜客初赛第五场)(待解决)

    20.7% 1200ms 262144K 每个 UCloud 用户会构造一个由数字序列组成的秘钥,用于对服务器进行各种操作.作为一家安全可信的云计算平台,秘钥的安全性至关重要.因此,UCloud 每年 ...

  7. vue的数据绑定和组件化

    组件:就是自定义标签, 也是Vue的实例对象; 组件好处:就像工作分工,函数封装等 组件分为全局组件和局部组件: 全局组件,在Vue身上的组件,所有的vue挂载的元素内都可以使用:正是因为这一点,co ...

  8. 剑指offer——python【第21题】栈的压入、弹出序列

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...

  9. Java编程基础篇第一章

    计算机语言 人与计算机交流的方式. 计算机语言有很多种如:C语言,c++,Java等 人机交互 软件的出现实现了人与计算机之间的更好的交流(交互) 交互方式 图形化界面:便于交互,容易操作,简单直观, ...

  10. Intellij IDEA快捷键与使用技巧一览表

    Intellij IDEA快捷键 Ctrl+Shift + Enter,语句完成 "!",否定完成,输入表达式时按 "!"键 Ctrl+E,最近的文件 Ctrl ...