jQuery/javascript实现IP/Mask自动联想功能

之前做一个云计算的项目，涉及到一个安全组自动联想的功能，思想是这样的：

1. /**
2. *IP自动联想
3. *
4. *@paraminputIP
5. *@returnIP/Task
6. */
7. functiongetIpArray(input){
8. varipArray=input.split('.');
10. for(vari=0;i<4;i++){
11. if(ipArray[i]==undefined||ipArray[i]==''){
12. ipArray[i]=0;
13. }
14. //
15. //if(ipArray[i].indexOf('0')==0&&ipArray[i].length>1){
16. //ipArray[i]=ipArray[i].substring(1,ipArray[i].length);
17. //}
18. }
20. returnipArray;
21. }
23. functionevery(arr,func){
24. varaa=[];
25. for(vari=0;i<arr.length;i++){
26. aa.push(func(arr[i]));
27. }
28. returnaa;
29. }
31. functionindexOfEnd(str){
32. for(vari=str.length-1;i>=0;i--){
33. if(str.charAt(i)=='1'){
34. return8-(str.length-i)+1;
35. }
36. }
37. return0;
38. }
40. functiongetPermissions(input){
41. varipArray=getIpArray(input);
42. varip=ipArray.join('.');
44. varbinaryIpArray=every(ipArray,function(oct){
45. returnNumber(oct).toString(2);
46. });
48. varyanma=0;
49. for(vari=binaryIpArray.length-1;i>=0;i--){
50. if(binaryIpArray[i]!=0){
51. yanma=indexOfEnd(binaryIpArray[i])+i*8;
52. break;
53. }
54. }
56. varabc=[8,16,24,32];
57. varrstArray=[ip+'/'+yanma];
58. for(vari=0;i<abc.length;i++){
59. if(abc[i]>yanma){
60. rstArray.push(ip+'/'+abc[i]);
61. }
62. }
64. returnrstArray;
65. }

这里主要是在键盘事件触发的时候的一个脚本，实现自动联想

1. /**
2. *创建安全组自动联想DOM
3. */
4. functioncreateSgDom(input){
5. vararrayObj=newArray();
6. varary=newArray();
7. this.setNewAry([]);
8. this.setAry([]);
10. varautoData=jsonData.substring(1,jsonData.length-1).split(',');
11. for(varelementinautoData){
12. arrayObj.push(autoData[element]);
13. }
15. varpermissions=/^((?:(?:25[0-5]|2[0-4]/d|((1/d{2})|([1-9]?/d)))/.){3}(?:25[0-5]|2[0-4]/d|((1/d{2})|([1-9]?/d))))$/;
16. varip_1=/^((?:(?:25[0-5]|2[0-4]/d|((1/d{2})|([1-9]?/d)))[/.]?){1,3})$/;
17. varstr=/^[a-zA-Z]*([a-zA-Z]|[-])*$/;
18. if(null!=input&&!str.test(input)){
19. if(ip_1.test(input)||permissions.test(input)){
20. varexcept=false;
21. if(input.indexOf('.')>-1){
22. varvalue=input.split('.');
24. for(varvalinvalue){
25. varinVal=value[val];
26. if(inVal.indexOf('0')==0&&inVal.length>1){
27. except=true;
28. }
29. if(inVal>255){
30. except=true;
31. }
32. }
33. }else{
34. if(input>255){
35. except=true;
36. }
37. }
38. if(!except){
39. varips=getPermissions(input);
41. for(varipinips){
42. ary.push(ips[ip]);
43. }
44. }
45. }
46. }
48. if(ary!=null){
49. newAry=arrayObj.concat(ary);
50. }else{
51. newAry=arrayObj;
52. }
54. this.setNewAry(newAry);
56. $('#suggest_value').autocomplete({
57. source:this.getNewAry(),
58. minLength:0,
59. close:function(event,ui){
60. },
61. focus:function(event,ui){
62. returnfalse;
63. },
64. change:function(event,ui){
65. },
66. select:function(event,ui){
67. if(ui.item.label.indexOf('(')>-1&&ui.item.label.indexOf(')')>-1){
68. ui.item.value=ui.item.label.substring(0,ui.item.label.indexOf('('));
69. }else{
70. ui.item.value=ui.item.label.substring(0,ui.item.label.length);
71. }
72. }
73. });
74. }

最后：

1. //在输入框加上一个keyup事件，指定执行脚本：createSgDom($('#suggest_value').val());
2. //引入自动联想插件和上面处理ip掩码的脚本
3. <scripttype="text/Javascript"src="theme/default/js/cbms/ip-permissions.js"></script>
4. <%--<scriptsrc="theme/default/jquery-ui/js/jquery-1.8.3.js"type="text/javascript"></script>--%>
5. <scriptsrc="theme/default/jquery-ui/js/jquery-ui-1.8.24.custom.min.js"type="text/javascript"></script>