首页 > 代码库 > 关键字的添加

关键字的添加

2024-10-03 05:02:39   217人阅读

关键字的添加

1、建议将css样式内容在放一个单独的css文件中，这里以keywordinput.css为例

 1 #keyword-container {
 2     border:1px solid #bbb;
 3     width:700px;
 4 }
 5 #keyword-exists {
 6     display:none;
 7 }
 8 input.keyword-input {
 9     border:none;
10     width:298px;
11     color:#aaa;
12     height:28px;
13 }
14 div.keyword-in {
15     float:left;
16     font-size:12px;
17     margin:3px;
18     background:#3fa7cb;
19     padding:3px;
20     color:#fff;
21 }
22 a.keyword-shut:link,a.keyword-shut:visited {
23     margin-left:3px;
24     color:#fff;
25     text-decoration:none;
26 }
27 a.keyword-shut:hover {
28     color:#732;
29 }

 

　2、这里将js以插件的方式放在jquery.keywordinput.js文件中

 　　关键字的数量只能为5个，根据需要可以以参数的方式修改数量，并且不能添加相同的关键字

 

 1 (function($){
 2     var setting;
 3     $.fn.keywordinput = function(opts) {
 4         setting = $.extend({
 5             number:5,
 6             msg:"请输入关键字，通过逗号或者回车确认",
 7             autocomplete:{
 8                 enable:false,
 9                 url:"#",
10                 minLength:1
11             },
12             exists_id:"keyword-exists"
13         },opts||{});
14         init(this);
15         if(setting.autocomplete.enable) {
16             $(this).autocomplete({
17                 source:setting.autocomplete.url,
18                 minLength:setting.autocomplete.minLength
19             });
20         }
21         $(this).keydown(inputKeyword);
22         /**
23          * 通过事件委派处理
24          */
25         $("#keywords-wrap").on("click","a.keyword-shut",function(event){
26             $(this).parent(".keyword-in").remove();
27             event.preventDefault();
28         });
29     }
30     function initAddKeyword() {
31         $("#"+setting.exists_id+" span").each(function() {
32             var ki = createKeyword($(this).html());
33             $("#keywords-wrap").append(ki);
34         })
35     }
36     function init(input) {
37         $(input).val(setting.msg);
38         $(input).addClass("keyword-input");
39         $(input).wrap("<div id=‘keyword-container‘></div>")
40                 .before("<div id=‘keywords-wrap‘></div>");
41         initAddKeyword();
42         $(input).focus(function(){
43             $(this).val("");
44         });
45         $(input).blur(function(){
46             $(this).val("请输入关键字，通过逗号或者回车确认");
47         });
48     }
49     function inputKeyword(event) {
50         var code = event.keyCode;
51         if(code==188||code==13) {
52             var c = $(this).val();
53             if(c!="") {
54                 if($(".keyword-in").length>=setting.number) {
55                     alert("最多只能允许添加"+setting.number+"个关键字");
56                     event.preventDefault();
57                     return false;
58                 }
59                 var aks = $("input[name=‘aks‘]");
60                 for(var i=0;i<aks.length;i++) {
61                     if($(aks[i]).val()==c) {
62                         alert("不能添加重复的关键字");
63                         event.preventDefault();
64                         return false;
65                     }
66                 }
67                 var ki = createKeyword(c);
68                 $("#keywords-wrap").append(ki);
69                 $(this).val("");
70             }
71         }
72     }
73     function createKeyword(val) {
74         return "<div class=‘keyword-in‘><span>"+val
75         +"</span><a href=http://www.mamicode.com/‘#‘ class=‘keyword-shut‘>×;
76     }
77 })(jQuery)

3、在HTML或者JSP中，只需要一个input元素即可：
1 <input type="text" id="keyword-input" value="" />

 

4、引入刚才创建的css和js文件，同时还需要引入jQuery文件，添加页面加载事件，实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <link rel="stylesheet" type="text/css" href="keywordinput.css"/>
 7 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 8 <script type="text/javascript" src="jquery.keywordinput.js"></script>
 9 <script type="text/javascript">
10     $(function(){
11         $("#keyword-input").keywordinput();
12     });
13 </script>
14 </head>
15 <body>
16 <input type="text" id="keyword-input" value="" />
17 </body>
18 </html>

 



技术分享












 
关键字的添加






























        

            
                
                  
                
                

                    联系

                    我们