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. MVC 翻頁的那些坑

    思绪良久,最后还是决定记录一下遇到的坑,毕竟被 ‘折磨’ 了三天,关于分页,这个话题,我一开始时拒绝的,因为真正接触项目的时候,才发现每个框架都会封装一套自己的分页,毕竟相同风格的项目是不常见的,而在 ...

  2. javascript常用积累

    一.JS动画与动作不一致解决: if(!$( "#handle").is(":animated")){ //判断元素是否处于动画状态 } 二.停止事件冒泡 ev ...

  3. Linux基础命令---调整程序优先级renice

    renice renice指令可以重新调整程序运行的优先级,可以通过进程id.用户id.组id来修改优先级.修改组的等级,影响组内所有用户的所有进程优先级:修改用户等级,影响该用户的所有进程优先级.除 ...

  4. JS神经网络deeplearn.js:浏览器端机器智能框架

    JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...

  5. 1113: No mapping for the Unicode character exists in the target multi-byte code page

    windows版本nginx启动 报错. 启动方式:到nginx所在目录执行:nginx.exe -c conf\nginx.conf 原因:所在路径中含有中文字符. 解决:换个没有中文的路径.

  6. <转>jmeter(六)元件的作用域与执行顺序

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  7. Centos7 安装 apache + php7.0 环境

    安装apache rpm -qa|grep httpd   查看是否安装 yum install httpd  安装 service httpd start  启动服务 测试是否 启动       I ...

  8. MyEclipse如何清除废弃的工作空间

    1.MyEclipse如何清除废弃的工作空间Windows--->Preferences--->General--->Startup and Shutdown--->Works ...

  9. JDK源码之Lock接口

    public interface Lock { //阻塞的获取锁,如果获取到锁,从该方法返回 void lock(); //可中断的获取锁,该方法会响应中断,在锁的获取中可以中断当前线程 void l ...

  10. composer 报错:Failed to decode response: zlib_decode(): data error 解决办法

    执行命令 composer require particle/validator 报错 Failed to decode response: zlib_decode(): data error 网上推 ...