chosen ajax获取数据,Jquery Chosen插件 - 由Ajax动态填充列表
小智..
5
选择的答案已经过时,熔化/ ajax选择的插件也是如此.
使用Select2插件有很多错误,我无法解决它.
这是我对这个问题的回答.
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms (2 seconds)
var selectID = 'YourSelectId'; //Hold select id
var selectData = []; // data for unique id array
//on keyup, start the countdown
$('#' + selectID + '_chosen .chosen-choices input').keyup(function(){
// Change No Result Match text to Searching.
$('#' + selectID + '_chosen .no-results').html('Searching = "'+ $('#' + selectID + '_chosen .chosen-choices input').val() + '"');
clearTimeout(typingTimer); //Refresh Timer on keyup
if ($('#' + selectID + '_chosen .chosen-choices input').val()) {
typingTimer = setTimeout(doneTyping, doneTypingInterval); //Set timer back if got value on input
}
});
//user is "finished typing," do something
function doneTyping () {
var inputData = $('#' + selectID + '_chosen .chosen-choices input').val(); //get input data
$.ajax({
url: "YourUrl",
data: {data: inputData},
type:'POST',
dataType: "json",
beforeSend: function(){
// Change No Result Match to Getting Data beforesend
$('#' + selectID + '_chosen .no-results').html('Getting Data = "'+$('#' + selectID + '_chosen .chosen-choices input').val()+'"');
},
success: function( data ) {
// iterate data before append
$.map( data, function( item ) {
// matching data eg: by id or something unique; if data match: not append - else: append
// This will prevent from select the same thing twice.
if($.inArray(item.attr_hash,selectData) == -1){
// if not match then append in select
$('#' + selectID ).append('' + item.data + '');
}
});
// Update chosen again after append
$('#' + selectID ).trigger("chosen:updated");
}
});
}
// Chosen event listen on input change eg: after select data / deselect this function will be trigger
$('#' + selectID ).on('change', function() {
// get select jquery object
var domArray = $('#' + selectID ).find('option:selected');
// empty array data
selectData = [];
for (var i = 0, length = domArray.length; i < length; i++ ){
// Push unique data to array (for matching purpose)
selectData.push( $(domArray[i]).data('id') );
}
// Replace select to only selected option
$('#' + selectID ).html(domArray);
// Update chosen again after replace selected
$('#' + selectID ).trigger("chosen:updated");
});
chosen ajax获取数据,Jquery Chosen插件 - 由Ajax动态填充列表相关推荐
- 自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
- 【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
- jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...
- Datatables学习(二)ajax获取数据
上一篇文章,讲解了datatables的基本创建,这一讲讲解datatables通过ajax异步获取数据 1.前提准备 以一个图书管理的表格为例,后台java代码就不细说了,这里主要讲解前端 数据库表 ...
- vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
- vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
- Chart.js使用及ajax获取数据
图表插件Chart.js使用 插件简介 安装 插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
- select2 ajax获取数据设置默认值,初始值
select2是一个非常好用的select美化插件,但是在最近使用时发现,select2在使用ajax获取数据内容时设置默认值非常麻烦,官方给出了一个解决方案就是添加一个属性selected的opti ...
- BOS项目02_02_zTree-通过ajax的获取菜单数据、监听树形菜单的点击事件、读取json文件、Ajax获取数据
系列文章目录 文章目录 系列文章目录 前言 一.发送ajax网络请求获取菜单数据 二.监听树形菜单的点击事件 总结 前言 一.发送ajax网络请求获取菜单数据 我们现在的数是写死的,那么实际项目中我们 ...
最新文章
- 用php计算自由落体,js模仿物理中的自由落体现象
- Android 获取SD卡的图片资源
- 理解JWT(JSON Web Token)认证及python实践
- samba 2.2.7a 编译
- LeetCode 1798. 你能构造出连续值的最大数目
- java中枚举类型详解
- Macaca:南方航空人工测试的拯救者
- 吴恩达深度学习1.4笔记_Neural Networks and Deep Learning_深层神经网络
- The reference to entity characterEncoding must end with the ';' delimiter
- attention :为什么要用attention机制
- mysql 8.0 ~ 安装
- 通过官网下载KITTI数据集失败解决方法
- cad画直线长度与实际不符_cad测量直线长度(CAD测量长度与实际画线长度不符)...
- SQLite 生成随机数字、字符串、日期、验证码以及 UUID
- 计算机桌面背景设成白色,电脑桌面背景变白色的了怎么处理啊?
- C++ builder 添加资源文件
- UE4 UE4 C++ Gameplay Abilities的GameplayCue
- 黑马点评--附近商铺
- outlook怎么删除服务器备份文件,如何彻底删除outlook的一切数据,包括账户信息和邮件...
- C++用桌面图标系列之三【整理-时钟】