<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. 22状态模式State

    一.什么是状态模式 State模式也叫状态模式,是行为设计模式的 一种.State模式允许通过改变对象的内部状态 而改变对象的行为,这个对象表现得就好像修改 了它的类一样. 二.状态模式的应用场景 状 ...

  2. Windows10 + IntelliJ IDEA 2017.3.2 + wamp2e + xdebug 调试 配置

    一.环境 系统: windows10 WampServer:  wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-32b.exe IDE:  Intel ...

  3. vs2010下release版本调试设置

    设置在Release模式下调试的方法: 1.工程项目上右键 -> 属性 2.c++ -> 常规 -〉调试信息格式 选 程序数据库(/Zi)或(/ZI), 注意:如果是库的话,只能(Zi) ...

  4. Centos7.6 安装DNS服务器

    Centos7 安装 DNS 服务器 1 需求 需要在内部局域网安装一台域名服务器,让内网的机器通过此域名服务器解析IP地址: 2 设备 A TPLink路由器,型号 TL-WDR6500: B 准备 ...

  5. 一、Sql Server 基础培训《进度1-建库建数据表(实际操作)》

    知识点: 1.建数据库示例参考 --创建一个数据库名为‘dbtest’ create database dbtest go --打开数据库 dbtest use dbtest go 2.建表示例参考 ...

  6. nginx的https和http共存反向代理配置

    一.设置http反向代理: upstream ly.com { server ; server ; } upstream home.ly.com { server ; server ; } 对应增加: ...

  7. iOS - 记住用户登录状态保存用户名密码

    我们在使用APP时常用的一个功能:用户第一次进入APP时自动进入登录注册页,提示用户注册登录,用户登录成功后才进入主页,再次进入APP时,不用再次登录就直接进到主页了,就算杀掉该APP进程再次进入,依 ...

  8. 原码、补码,反码以及JAVA中数值采用哪种码表示

    原码.补码,反码以及JAVA中数值采用哪种码表示 1.原码定义(摘自百度百科):一种计算机中对数字的二进制定点表示方法,原码表示法在数值前面增加了一位符号位(即最高位为符号位):正数该位为0,负数该位 ...

  9. 17、php

    php 1.WEB服务的三大组件 ==apache .php . mysql== Apache服务器.(端口号定义,==http协议==,开启和关闭)   一种开放源码的HTTP服务器,可以在大多数计 ...

  10. FatMouse' Trade(杭电ACM---1009)

    FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...