jQuery 插件autocomplete 应用

介绍

 $("#AccountNames").autocomplete(Accounts, {
minChars: 0,
matchContains: true,
mustMatch: false,
multiple: true,
multipleSeparator: ',',
formatItem: function (row, i, max) {
if ($("input[name='AccountIds'][value=" + row.AccountId + "]").size() == 0) {
if (row.FullName!=row.AccountName)
return row.AccountName + "(" + row.FullName + ")";
else
return row.AccountName;
} else {
return false;
}
},
formatMatch: function (row, i, max) {
if (row.FullName!=row.AccountName)
return row.AccountName + "(" + row.FullName+")";
else
return row.AccountName;
},
formatResult: function (row) {
return row.AccountName;
}
}).result(function (event, data, formatted) {
if(data){
$("<input name=\"AccountIds\" type=\"hidden\" />").val(data.AccountId).appendTo("#SpendExportForm");
} }).blur(function () {
var accName = $(this).val();
$("input[name=AccountIds]").each(function(){
var id=parseInt($(this).val());
var name=$.grep(Accounts,function(row){return row.AccountId==id;})[0].AccountName;
if(!new RegExp("(^"+name+",)|(,"+name+",)","i").exec(accName)){
$(this).remove();
}
});
return true;
}).keyup(function () {
if($.trim($(this).val())==""){
$("input[name=AccountIds]").remove();
}
});

jquery文档

数组的处理

                var idsa=[];
$("input[name=AccountIds]").each(function(){
idsa.push($(this).val());
});
                var d = $("#WalletIds").select2('data');
var idsw = $.map(d, function (v, i) {
return v.id;
});

  

  

正则的处理

                  if(!new RegExp("(^"+name+",)|(,"+name+",)","i").exec(accName)){
$(this).remove();
}

  

数组过滤

var name=$.grep(Accounts,function(row){return row.AccountId==id;})[0].AccountName;

  

 

form隐藏域,form提交

                $("#SpendExportForm").html("");
var d = $("#WalletIds").select2('data');
var ids = $.map(d, function (v, i) {
$("<input type=\"hidden\" name=\"WalletIds\" />").val(v.id).appendTo("#SpendExportForm");
}); $("input[name=AccountIds]").each(function(){
$("<input type=\"hidden\" name=\"AccountIds\" />").val($(this).val()).appendTo("#SpendExportForm");
}); $("<input type=\"hidden\" name=\"showAdDistribution\" />")
.val( $("#showAdDistribution")[0].checked).appendTo("#SpendExportForm"); $("#SpendExportForm").submit();

  

 

Jquery相关插件的更多相关文章

  1. jQuery 相关插件

    jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有 ...

  2. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  3. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  4. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  5. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

  6. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

  7. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  8. FancyBox - 经典的 jQuery Lightbox 插件

    FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...

  9. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

随机推荐

  1. MySql 应用语句

    [1]MySQL基础语句 -- 查询mysql版本号 SELECT VERSION(); -- 创建数据库 DROP DATABASE IF EXISTS study; -- 如果存在先删除 CREA ...

  2. 读QT5.7源码(三)Q_OBJECT 和QMetaObject

    Qt meta-object系统基于三个方面:  1.QObject提供一个基类,方便派生类使用meta-object系统的功能:  2.Q_OBJECT宏,在类的声明体内激活meta-object功 ...

  3. Compare AURO OtoSys IM100 with OtoSys IM600

    The main difference lies in Mercedes-Benz, VW, Audi software and adapters to work with. Software dif ...

  4. 搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境

     一.开发环境配置 开始之前,假设你已经安装了最新版本的 node 和 npm. 全局安装 vue-cli 和 webpack : npm install vue-cli webpack -g 创建工 ...

  5. 前端框架VUE----babel

    这个是解析我们es6的代码的,为什么要用它呢,因为对于一些ie浏览器,甚至FF浏览器,低版本的还不能识别我们的es6代码,那么vue里面好多还让我们去写es6的代码,这个时候我们就可以用babel这个 ...

  6. Kattis之旅——Perfect Pth Powers

    We say that x is a perfect square if, for some integer b, x = b2. Similarly, x is a perfect cube if, ...

  7. 双屏互动h5

    情侣H5:https://www.25xt.com/allcode/10837.html 双屏互动:https://www.digitaling.com/articles/18180.html

  8. git学习总结 - 纯命令

    全局安装git: npm intall git -g 查看git版本: git --version 进入目录,初始化git: 若在目录中使用上一个,不在目录中使用下一个. //已有目录: git in ...

  9. Linux进程内存分析pmap命令

    转自: http://blog.csdn.net/u013982161/article/details/52654256 名称: pmap - report memory map of a proce ...

  10. jackson/fastjson、mybatis、mysql date/datatime/timestamp、java Date/Timestamp关系详解

    jackson/fastjson序列化/反序列化: 默认情况下,jackson/fastjson将java Date/Timestamp类型序列化为时间戳,也就是1970年1月1日0点以来的毫秒数.如 ...