<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. is not in the sudoers file解决方法

    用sudo时提示"xxx is not in the sudoers file. This incident will be reported.其中XXX是你的用户名,也就是你的用户名没有权 ...

  2. docker应用-5(使用overlay 网络进行容器间跨物理主机通信)

    同一个主机上的Docker容器之间通信 docker 引擎会在主机上增加一个docker0网卡,该网卡具有双重身份: 1.从容器视角,网桥(交换机)身份docker0 对于运行在同一个主机上的各个容器 ...

  3. python数据分析及展示(一)

    一.IDE选择 Anaconda软件:开源免费,https://www.anaconda.com下载,根据系统进行安装.由于下载速度慢,可以去清华大学开源软件镜像站下载. Spyder软件设置:Too ...

  4. C++学习 —— 重新认识C++

    我大概是从读研究生入学那天开始,想要学好C++的,学习C++几乎也成了我每个学期的计划之一.为什么会每个学期都想要学好C++呢?因为每次学习都失败了啊... 本月,我开始再Coursera上学习Het ...

  5. 三种不同类型的ssh隧道

    何谓SSH隧道 隧道是一种把一种网络协议封装进另外一种网络协议进行传输的技术.这里我们研究ssh隧道,所以所有的网络通讯都是加密的.又被称作端口转发,因为ssh隧道通常会绑定一个本地端口,所有发向这个 ...

  6. LDA总结 (一) 共轭分布

    今天开始,复习一下 LDA ,记录一些 LDA 的关键步骤,为写好论文做铺垫.第一节的主题是共轭分布,回忆贝叶斯公式: \[p(\theta|X) = \frac{p(\theta) \cdot p( ...

  7. 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

    参考;https://blog.csdn.net/qq_37746973/article/details/78402812?utm_source=blogxgwz1 https://blog.csdn ...

  8. cf 1132 F

    区间dp.. 每次删一串相邻的一样的,问多少次删光. 感觉想的几乎是一样的怎么比赛时就过不了呢...一定是因为我挂机睡觉了 考虑l和r相等,l和l+1相等,r和r-1相等这三种情况就行了..然后就是裸 ...

  9. php 判断手机号 和 手机号中间四位以**** 代替

    代码: //自定义函数手机号隐藏中间四位 function get_phone($str){ $str=$str; $resstr=substr_replace($str,'****',3,4); r ...

  10. C#常用加密方法

    using System; using System.IO; using System.Security.Cryptography; using System.Text; /// <summar ...