jquery 添加关键字小插件_weixin_30662539的博客-程序员宝宝

技术标签: ViewUI  javascript  

 

模块化封装,兼容seajs

/**
 * User: c3t
 * Date: 14-3-25
 * Time: 下午4:16
 */


define(function (require, exports, module) {
    return function (jQuery) {
        (function ($) {
            var setting = null;
            $.fn.keywordInput = function (opts) {
                setting = $.extend({
                    number: 5, //关键字数量限定
                    msg: "请输入关键字,通过逗号或者回车确认"
                }, opts || {});
                init(this);
                this.keyup(inputKeywords);
                //通过事件委派。对新加入的标签添加事件
                $("#keywords-wrap").on("click", ".keyword-shut", function (event) {
                    $(this).parent(".keyword-in").remove();
                    event.preventDefault();
                });

            };
            function init(input) {
                $(input).val(setting.msg);
                $(input).addClass("keyword-input");
                $(input).wrap("<div id='keyword-container'></div>").before("<div id='keywords-wrap'></div>");

                $(input).focus(function () {
                    $(this).val("");
                });

                $(input).blur(function () {
                    $(this).val(setting.msg);
                });
            }

            function inputKeywords(event) {
                var code = event.keyCode;
                if (code == 188 || code == 13) {
                       var c = $(this).val();
                    if(c!="") {
                        if($(".keyword-in").length >=setting.number){
                            alert("最多只能允许添加"+setting.number+"个关键字");
                            event.preventDefault();
                            return  false;
                        }
                        //防止关键字重复
                        var aks = $("input[name='aks']");
                        for(var i=0;i<aks.length;i++) {
                            if($(aks[i]).val()==c) {
                                alert("不能添加重复的关键字");
                                event.preventDefault();
                                return false;
                            }
                        }

                        var ki = createKeyWord(c);
                        $('#keywords-wrap').append(ki);
                        $(this).val("");
                    }
                }

            }

            function createKeyWord(val) {
                return "<div class='keyword-in'>"+
                            "<span>"+val+"</span>"+
                            "<a href='#' class='keyword-shut'>×</a>"+
                            "<input type='hidden' name='aks' value='"+val+"'/>"+
                       "</div>";
            }
        })(jQuery);
    }
});

css 样式

#keyword-container {
    border: 1px solid #bbb;
    width: 300px;
}

input.keyword-input {
    border: none;
    width: 300px;
    color: #aaa;
    height: 28px;
}

.keyword-in {
    float: left;
    font-size: 12px;
    margin: 3px;
    background: #3fa7cb;
    color: #fff;
}

.keyword-shut:link, .keyword-shut:visited {
    color: #fff;
    text-decoration: none;
}

a.keyword-shut:hover {
    color: #ff0000;
}

 页面

 <input type="text" id="keyword-input" value=""/>

 调用

$("#keyword-input").keywordInput();

 

转载于:https://www.cnblogs.com/or2-/p/3632146.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30662539/article/details/94920567

智能推荐

Codeforces - 998C-Equal Sums【map + 思维】_北里五井的博客-程序员宝宝

C. Equal Sumstime limit per test2 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputYou are given kk sequences of integers. The length of the ii-th sequence equals to ni...

python关键字库名叫什么_使用KEA或其他python库提取关键字_ku drei的博客-程序员宝宝

我现在为一个关键字提取项目工作。基本上,我使用python来实现这一点。让我先谈谈我的项目是什么。我在这个项目中的目标是从一段或一个网页中找出关键词(关键短语不太可取)。在我假设我可以从一个网站抓取一个相当好的内容结构。在假设我有很多段落,所有段落都来自同一个行业。下面是一个示例段落:About usWe are the greatest bank in the world, which prov...

如何在MATLAB中调用R函数_zhutuanfei的博客-程序员宝宝_matlab r函数

实例: 大维的方差估计需要应用一个R包PDSCE,而之前的程序都由MATLAB书写。因此,需要在MATLAB程序中调用R的PDSCE包。首先,安装R软件(需要将R加入到系统路径,即修改环境变量path)。其次,从本地安装PDSCE。有些包需要C编译,如果不能加载成功,需要安装Rtools。然后,编写如下的程序过程1.  csvwrite('in.csv',input_data); ...

Linux 配置ip 子接口 多网卡绑定_centos2015的博客-程序员宝宝_linux配置子网卡

linux系统配置ip地址,图形化界面略过,这里只介绍文本行。做以下设置注意是否有此权限查看当前路由及网关信息:[[email protected] ~]# netstat -rKernel IP routing tableDestination Gateway Genmask Flags MSS Window irtt Iface192.168.1

(Adobe Air) Bring a window to front by clicking the systemTrayIcon_unixboy_xujf的博客-程序员宝宝

Whiledeveloping an AIR application, I had an issue with bringing theapplication to front (above all other windows) when clicking thesystemTrayIcon.Usually, you would use the method:...

随便推点

基于STM32的USB驱动程序设计,PC驱动程序,Android驱动程序源码一锅端_LiuhCode的博客-程序员宝宝_stm32usb驱动程序

主要内容:1,单片机为STM32F103,USB配置为Bulk传输,两个IN端点,两个OUT端点; 2,PC端基于libusb的实现USB端点数据发送与接收,并封装成DLL动态链接库; 3,PC端调用2封装的动态链接库实现USB端点的数据发送与接收; 4,机器人端通过调用系统提供的USB函数,并再次封装为罐文件(类似于DLL); 5,Android端调用4封装的jar文件实现USB端点的数据发送与...

计算机的基础知识_sunmengting0123的博客-程序员宝宝_计算机的基础知识

️一、信息与数据1、信息(information)是人们用于表示具有一定意义的符号集合,这些符号可以是文艺、数字、图形、图像、动画、声音、光等。信息同物质(materia)和能源(energy)一样,是人们赖以生存和社会发展的重要资源。2、数据(date)数据是信息的具体表现形式,是指人们看到的和听到的事实,是各种各样的物理符号及其组合,它反映了信息的内容。????????二、计算机概述计算机是一种能存储程序和数据,自动执行程序、快速和高效的完成对各种数字化信息处理的电子设备。????

win10自带抓包工具_win10应用商店抓包-Win10商店抓包工具下载 v1.1免费版--pc6下载站..._花城旧梦的博客-程序员宝宝

Windows10应用商店抓包工具是一款专为win10系统用户打造的抓包软件,能帮助用户抓取应用商店下载的源链接,提取下载地址,简单直接,免去了搜索的烦恼,想要快速获取下载地址,不妨来试试win10商店应用程序抓包软件吧。Windows10应用商店抓包工具是一款专为win10系统用户打造的抓包软件,能帮助用户抓取应用商店下载的源链接,提取下载地址,简单直接,免去了搜索的烦恼,想要快速获取下载地址,...

JABC 操作_qq513283439的博客-程序员宝宝

package DB;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;im

echarts + vue 使用_weixin_42127141的博客-程序员宝宝

&lt;template&gt; &lt;div class="h100p"&gt; &lt;div class="basic_title"&gt;监控&lt;/div&gt; &lt;div v-for="(item,index) in containerMonitor" :key="index"&gt; ...

每天记录学习的新知识 :使用Glide时,setImageResource/setImageDrawable图片不显示_清风徐来辽的博客-程序员宝宝

记录使用Glide后,需要先 ↓Glide.with(this).clear(photo);再调用setImageResource/setImageDrawable

推荐文章

热门文章

相关标签