<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. fiddler 使用记录

    fiddler 工作原理 Fiddler 启动后将自己变成一个代理服务器,这个代理服务器默认监听 127.0.0.1:8888. Filddler 启动后浏览器的代理会被自动更改为 127.0.0.1 ...

  2. C# 鼠标移动Winform窗体内或者panel容器内的控件 显示虚线/实现虚线框来确定位置

    C# 鼠标移动WinForm窗体或者panel容器内的控件 移动虚线/实现虚线框来确定位置 1.用到的方法介绍 今天,根据领导指示指导移动容器内的控件,生成虚线框,使用 ControlPaint.Dr ...

  3. sanchi

    修炼之路阶段1能简单处理html+css+js前端页面,可实现管理后台前端页面 熟练安装php的web运行环境,并调整配置,会自行安装php扩展 熟练数据库操作,清楚为何使用pdo而不使用mysql等 ...

  4. html5与css 1. web标准及组成

    学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4.HTML基本结构和HTML语法 5.HTML ...

  5. jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  6. /编写一个函数,要求从给定的向量A中删除元素值在x到y之间的所有元素(向量要求各个元素之间不能有间断), 函数原型为int del(int A ,int n , int x , int y),其中n为输入向量的维数,返回值为删除元素后的维数

    /** * @author:(LiberHome) * @date:Created in 2019/2/28 19:39 * @description: * @version:$ */ /* 编写一个 ...

  7. 转 docker创建私有仓库和k8s中使用私有镜像

    docker私有仓库建立 环境说明我们选取192.168.5.2做私有仓库地址yum install docker -y1.启动docker仓库端口服务 docker run -d -p 5000:5 ...

  8. Django之Cookie、Session、CSRF、Admin

    Django之Cookie.Session.CSRF.Admin   Cookie 1.获取Cookie: 1 2 3 4 5 6 request.COOKIES['key'] request.get ...

  9. 安装Linux系统

    一.环境准备 1.一个VM虚拟机镜像,一个CentOS-7镜像(注:CentOS-7和CentOS-6在命令上有很大的差别,这里选择CentOS-7版本) 二.开始安装 1.新建一个虚拟机,选择自定义 ...

  10. java并发包消息队列(也即阻塞队列BlockingQueue)

    下面是典型的消息队列的生产者与消费者模式的例子