JS实现项目查找功能
又是好久没有更新文章了，技术差，人又懒是重罪啊！！
在工作中每天都要查找目前正在接手的项目，而如果项目一多起来怎么办呢？ 最近主管突然说要找一下以前的项目改一点BUG，然后我就找了半天才找到对应的文件夹。这就严重影响了工作时间。故此，花了一点时间做了一下公司的项目查找功能，方便以后项目的查找，减少在这个上面的时间。
需求如下：
1、项目查找分为URL地址及文件夹路径
2、输入相应的项目名称(拼音),回车即可打开对应的项目URL或显示文件夹路径
3、显示以往项目列表，点击即可查看相应数据
效果实现：
一、页面结构及样式( html结构及样式就不多做解释)
1 <!DOCTYPE html> 2 <html lang="ZH-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>公司项目查找</title> 6 <style> 7 body {text-align:center;padding:100px 0;font-family:"Microsoft YaHei";background:#f5f5f5;text-shadow:0 1px 0 #fff;} 8 ul, ol {margin:0;padding:0;list-style:none;} 9 h1,h2 {font-weight:normal;color:#333;} 10 h1 {margin-bottom:40px;} 11 input {font-size:16px;font-family:"Microsoft YaHei";outline:none;} 12 input[type="text"] {width:360px;height:38px;padding:0 10px;margin-right:20px;border:1px solid #ccc;} 13 input[type="text"]:focus {box-shadow:0 1px 4px rgba(0,0,0,.2);} 14 input[type="button"] {height:42px;line-height:38px;width:100px;cursor:pointer;background:#fff;border:1px solid #ccc;} 15 input[type="button"]:hover {background:#eee;} 16 .search {width:510px;margin:0 auto 40px;text-align:left;} 17 .search p {font-size:14px;color:#333;margin:8px 0;} 18 .search_type li {display:inline-block;*display:block;*zoom:1;margin-right:15px;cursor:pointer;line-height:40px;color:#999;} 19 .search_type li.on {color:#333;} 20 .search_list {width:1024px;margin:0 auto;padding-bottom:1px;overflow:hidden;} 21 .search_list li {float:left;width:200px;line-height:50px;cursor:pointer;border:1px solid #ccc;margin:0 -1px -1px 0;background:#fff;} 22 .search_list li:hover {background:#eee;} 23 /*弹出框*/ 24 .box {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);} 25 .box_txt {display:none;position:fixed;top:50%;left:50%;background:#fff;font-size:20px;padding:20px 60px;transform:translate(-50%,-50%);border-radius:5px;box-shadow:0 1px 10px rgba(0,0,0,.6);} 26 </style> 27 </head> 28 <body> 29 30 <h1>公司项目查找</h1> 31 <div class="search"> 32 <!-- 选择类型 --> 33 <ul id="searchType" class="search_type"> 34 <li data-type="url" class="on">访问地址</li> 35 <li data-type="file">文件夹路径</li> 36 </ul> 37 <input type="text" name="url" id="url" placeholder="请输入对应项目名称" /> 38 <input type="button" id="urlBtn" value="打 开" /> 39 <p>示例：六色网站项目，请输入"liuse"，回车即可！</p> 40 </div> 41 <!-- 项目列表 --> 42 <h2>项目列表</h2> 43 <ul id="searchList" class="search_list"></ul> 44 45 <!-- 弹出框 --> 46 <div id="box" class="box"></div> 47 <div id="boxTxt" class="box_txt">E:\MoRong\AMP\htdoc\vhost6\yang</div> 48 49 </body> 50 </html>
二、脚本功能实现
1）定义项目存储数据数组， 分别代表： name: 搜索名称 ， desc: 项目中文描述 ， file: 项目文件夹路径 ， url: 项目URL地址
1 // url 地址 2 var dataUrl = [ 3 { 4 "name": "yang-mobile", 5 "desc": "羊羊得意-手机访问", 6 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\yang", 7 "url": "192.168.1.185/yang" 8 }, 9 { 10 "name": "yang", 11 "desc": "羊羊得意", 12 "file": "E:\\MoRong\\AMP\\htdoc\\vhost6\\yang", 13 "url": "127.0.0.6/yang" 14 }, 15 { 16 "name": "lottery", 17 "desc": "阿里感谢有你", 18 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\lottery", 19 "url": "192.168.1.185/lottery" 20 }, 21 { 22 "name": "jiate", 23 "desc": "嘉特通信", 24 "file": "E:\\MoRong\\AMP\\htdoc\\jiate", 25 "url": "jiate.com" 26 }, 27 { 28 "name": "jinpai", 29 "desc": "金派电子", 30 "file": "E:\\MoRong\\AMP\\htdoc\\jinpai", 31 "url": "jinpai.com" 32 }, 33 { 34 "name": "laili", 35 "desc": "莱立服装", 36 "file": "E:\\MoRong\\AMP\\htdoc\\laili", 37 "url": "www.laili.com" 38 }, 39 { 40 "name": "liuse", 41 "desc": "六色软件", 42 "file": "E:\\MoRong\\AMP\\htdoc\\liuse", 43 "url": "liuse.com" 44 }, 45 { 46 "name": "paizhao", 47 "desc": "公司摄影", 48 "file": "E:\\MoRong\\AMP\\htdoc\\paizhao", 49 "url": "www.paizhao.com" 50 }, 51 { 52 "name": "saima", 53 "desc": "阿里巴巴赛马会", 54 "file": "E:\\MoRong\\AMP\\htdoc\\paizhao/saima", 55 "url": "www.paizhao.com/saima" 56 }, 57 { 58 "name": "morong", 59 "desc": "默容官网", 60 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\morong", 61 "url": "127.0.0.3/morong" 62 }, 63 { 64 "name": "wohao", 65 "desc": "沃豪科技", 66 "file": "E:\\MoRong\\AMP\\htdoc\\wohao", 67 "url": "www.wohao.com" 68 } 69 ];
2） 创建公用function，获取ID及返回事件目标功能
1 // 公用功能 2 var morong = function() { 3 return { 4 // 获取ID 5 $$: function(id) { 6 return (!id) ? null : document.getElementById(id); 7 }, 8 // 返回事件目标 9 eventFun: function(event) { 10 var e = event || window.event; 11 return e.target || e.srcElement; 12 } 13 } 14 }();
3）创建项目查找功能构造函数，存储项目需要使用功能变量
1 // 打开URL构造函数 2 function ProjectSearch(obj) { 3 this.url = morong.$$(obj.url); // 接收URL文本框 4 this.btn = morong.$$(obj.btn); // 打开按钮 5 this.list = morong.$$(obj.list); // 项目列表 6 this._type = morong.$$(obj._type); // 搜索类型 7 this.box = morong.$$(obj.box); // 弹出框 8 this.boxTxt = morong.$$(obj.boxTxt);// 弹出内容 9 this.dataUrl = obj.dataUrl; // 项目数据 10 this.len = this.dataUrl.length; // 项目数量 11 this.selType = "url"; // 选择类型 12 }
4）创建原型方法
1 ProjectSearch.prototype = { 2 constructor: ProjectSearch 3 };
5）实例化构造函数，并传入相应参数，调用init()方法初始化页面功能
1 // 实例化 2 var project = new ProjectSearch({ 3 url: "url", 4 btn: "urlBtn", 5 list: "searchList", 6 _type: "searchType", 7 box: "box", 8 boxTxt: "boxTxt", 9 dataUrl: dataUrl 10 }); 11 // 初始化页面功能 12 project.init();
6）获取项目列表， 获取项目长度，遍历并且获取相应内容插入到页面ul#searchList标签中
1 // 获取项目列表 2 getListDesc: function() { 3 var strHTML = "", i; 4 // 遍历项目 5 for (i = 0; i < this.len; i++) { 6 var d = this.dataUrl[i]; 7 strHTML += "<li data-name='"+d.name+"' title="+d.name+">"+d.desc+"</li>"; 8 } 9 // 插入数据 10 this.list.innerHTML = strHTML; 11 }
7）获取查找项目名称，如果是点击列表则获取列表name 值，如果为文本框输入，则获取文本框内容，并判断搜索的是什么类型，最后搜索类型的不同，执行对应操作。
1 // 获取URL并打开 2 getUrlContent: function(name) { 3 var val = name || this.url.value, 4 flag = false, 5 url; 6 // 如果是点击项目列表 7 if (!name) { 8 if (val == '') { 9 alert("内容不能为空！"); 10 return false; 11 } 12 } 13 // 判断类型 14 if (this.selType == "url") { 15 // 遍历查找内容 16 for (var i = 0; i < this.len; i++) { 17 if (this.dataUrl[i].name == val) { 18 url = "http://"+this.dataUrl[i].url; 19 break; 20 } 21 } 22 } else if (this.selType == "file") { 23 // 遍历查找内容 24 for (var i = 0; i < this.len; i++) { 25 if (this.dataUrl[i].name == val) { 26 url = this.dataUrl[i].file; 27 flag = true; 28 break; 29 } 30 } 31 } 32 // 如果没有找到 33 if (!url) { 34 alert("没有找到此项目，请重新输入！"); 35 return false; 36 } 37 // 判断打开url或显示文件路径 38 (!flag) ? window.open(url) : this.promptBox(url); 39 }
8）设置类型及文件路径弹出框，设置类型：根据点击的目标，设置当前点击样式，并设置搜索类型为URL 或者 文件路径。 文件路径弹出框：插入文本内容，并显示
1 // 设置类型 2 classTag: function(target) { 3 var list = this._type.getElementsByTagName("li"), // 搜索类型列表 4 len = list.length; 5 for (var i = 0; i < len; i++) { 6 list[i].className = ""; // 移除所有class 7 } 8 target.className = "on"; // 添加给当前点击元素 9 this.selType = target.getAttribute("data-type"); // 设置类型 10 }, 11 // 提示框 12 promptBox: function(file) { 13 this.boxTxt.innerHTML = file; // 插入数据 14 this.box.style.display = "block"; // 显示 15 this.boxTxt.style.display = "block"; 16 }
9）设置初始化功能， 分别绑定“打开”按钮点击搜索事件及回车搜索事件功能，项目列表和类型选择同样采用绑定事件委托，并获取相应内容类型进行搜索，弹出框点击隐藏
1 // 初始化 2 init: function() { 3 var _self = this; 4 _self.url.focus(); // 默认聚焦 5 _self.getListDesc(); // 展示项目列表 6 // 按钮监听 7 _self.btn.addEventListener("click", function() { 8 _self.getUrlContent(false); 9 }, false); 10 // 键盘回车键监听 11 document.addEventListener("keypress", function() { 12 if (event.keyCode == 13) { 13 _self.getUrlContent(false); 14 } 15 }, false); 16 // 绑定点击项目列表 - 事件委托 17 _self.list.addEventListener("click", function(event) { 18 var target = morong.eventFun(event); 19 if (target.nodeName.toLowerCase() == "li") { 20 //获取自定义属性内容并打开页面 21 _self.getUrlContent(target.getAttribute("data-name")); 22 } 23 }, false); 24 // 类型选择事件 25 _self._type.addEventListener("click", function(event) { 26 var target = morong.eventFun(event); 27 if (target.nodeName.toLowerCase() == "li") { 28 _self.classTag(target); 29 } 30 }, false); 31 // 点击弹出框背景隐藏弹出框 32 _self.box.addEventListener("click", function() { 33 if (this.style.display == "block") { 34 this.style.display = "none"; 35 _self.boxTxt.style.display = "none"; 36 } 37 }, false); 38 }
10）整个项目查找功能分为以上几个小部分组成，全部代码示例如下：
1 <!DOCTYPE html> 2 <html lang="ZH-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>公司项目查找</title> 6 <style> 7 body {text-align:center;padding:100px 0;font-family:"Microsoft YaHei";background:#f5f5f5;text-shadow:0 1px 0 #fff;} 8 ul, ol {margin:0;padding:0;list-style:none;} 9 h1,h2 {font-weight:normal;color:#333;} 10 h1 {margin-bottom:40px;} 11 input {font-size:16px;font-family:"Microsoft YaHei";outline:none;} 12 input[type="text"] {width:360px;height:38px;padding:0 10px;margin-right:20px;border:1px solid #ccc;} 13 input[type="text"]:focus {box-shadow:0 1px 4px rgba(0,0,0,.2);} 14 input[type="button"] {height:42px;line-height:38px;width:100px;cursor:pointer;background:#fff;border:1px solid #ccc;} 15 input[type="button"]:hover {background:#eee;} 16 .search {width:510px;margin:0 auto 40px;text-align:left;} 17 .search p {font-size:14px;color:#333;margin:8px 0;} 18 .search_type li {display:inline-block;*display:block;*zoom:1;margin-right:15px;cursor:pointer;line-height:40px;color:#999;} 19 .search_type li.on {color:#333;} 20 .search_list {width:1024px;margin:0 auto;padding-bottom:1px;overflow:hidden;} 21 .search_list li {float:left;width:200px;line-height:50px;cursor:pointer;border:1px solid #ccc;margin:0 -1px -1px 0;background:#fff;} 22 .search_list li:hover {background:#eee;} 23 /*弹出框*/ 24 .box {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);} 25 .box_txt {display:none;position:fixed;top:50%;left:50%;background:#fff;font-size:20px;padding:20px 60px;transform:translate(-50%,-50%);border-radius:5px;box-shadow:0 1px 10px rgba(0,0,0,.6);} 26 </style> 27 </head> 28 <body> 29 30 <h1>公司项目查找</h1> 31 <div class="search"> 32 <!-- 选择类型 --> 33 <ul id="searchType" class="search_type"> 34 <li data-type="url" class="on">访问地址</li> 35 <li data-type="file">文件夹路径</li> 36 </ul> 37 <input type="text" name="url" id="url" placeholder="请输入对应项目名称" /> 38 <input type="button" id="urlBtn" value="打 开" /> 39 <p>示例：六色网站项目，请输入"liuse"，回车即可！</p> 40 </div> 41 <!-- 项目列表 --> 42 <h2>项目列表</h2> 43 <ul id="searchList" class="search_list"></ul> 44 45 <!-- 弹出框 --> 46 <div id="box" class="box"></div> 47 <div id="boxTxt" class="box_txt">E:\MoRong\AMP\htdoc\vhost6\yang</div> 48 49 <script> 50 (function() { 51 52 // url 地址 53 var dataUrl = [ 54 { 55 "name": "yang-mobile", 56 "desc": "羊羊得意-手机访问", 57 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\yang", 58 "url": "192.168.1.185/yang" 59 }, 60 { 61 "name": "yang", 62 "desc": "羊羊得意", 63 "file": "E:\\MoRong\\AMP\\htdoc\\vhost6\\yang", 64 "url": "127.0.0.6/yang" 65 }, 66 { 67 "name": "lottery", 68 "desc": "阿里感谢有你", 69 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong\\lottery", 70 "url": "192.168.1.185/lottery" 71 }, 72 { 73 "name": "jiate", 74 "desc": "嘉特通信", 75 "file": "E:\\MoRong\\AMP\\htdoc\\jiate", 76 "url": "jiate.com" 77 }, 78 { 79 "name": "jinpai", 80 "desc": "金派电子", 81 "file": "E:\\MoRong\\AMP\\htdoc\\jinpai", 82 "url": "jinpai.com" 83 }, 84 { 85 "name": "laili", 86 "desc": "莱立服装", 87 "file": "E:\\MoRong\\AMP\\htdoc\\laili", 88 "url": "www.laili.com" 89 }, 90 { 91 "name": "liuse", 92 "desc": "六色软件", 93 "file": "E:\\MoRong\\AMP\\htdoc\\liuse", 94 "url": "liuse.com" 95 }, 96 { 97 "name": "paizhao", 98 "desc": "公司摄影", 99 "file": "E:\\MoRong\\AMP\\htdoc\\paizhao", 100 "url": "www.paizhao.com" 101 }, 102 { 103 "name": "saima", 104 "desc": "阿里巴巴赛马会", 105 "file": "E:\\MoRong\\AMP\\htdoc\\paizhao/saima", 106 "url": "www.paizhao.com/saima" 107 }, 108 { 109 "name": "morong", 110 "desc": "默容官网", 111 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\morong", 112 "url": "127.0.0.3/morong" 113 }, 114 { 115 "name": "wohao", 116 "desc": "沃豪科技", 117 "file": "E:\\MoRong\\AMP\\htdoc\\wohao", 118 "url": "www.wohao.com" 119 }, 120 { 121 "name": "chenzong", 122 "desc": "陈总网站", 123 "file": "E:\\MoRong\\AMP\\htdoc\\chenzong", 124 "url": "chenzong.com" 125 }, 126 { 127 "name": "angular", 128 "desc": "angular练习", 129 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\angular", 130 "url": "127.0.0.3/angular" 131 }, 132 { 133 "name": "gulp", 134 "desc": "gulp练习", 135 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3\\gulp", 136 "url": "127.0.0.3/gulp" 137 }, 138 { 139 "name": "1", 140 "desc": "127.0.0.1", 141 "file": "E:\\MoRong\\AMP\\htdoc\\vhost1", 142 "url": "127.0.0.1" 143 }, 144 { 145 "name": "2", 146 "desc": "127.0.0.2", 147 "file": "E:\\MoRong\\AMP\\htdoc\\vhost2", 148 "url": "127.0.0.2" 149 }, 150 { 151 "name": "3", 152 "desc": "127.0.0.3", 153 "file": "E:\\MoRong\\AMP\\htdoc\\vhost3", 154 "url": "127.0.0.3" 155 }, 156 { 157 "name": "4", 158 "desc": "127.0.0.4", 159 "file": "E:\\MoRong\\AMP\\htdoc\\vhost4", 160 "url": "127.0.0.4" 161 }, 162 { 163 "name": "5", 164 "desc": "127.0.0.5", 165 "file": "E:\\MoRong\\AMP\\htdoc\\vhost5", 166 "url": "127.0.0.5" 167 }, 168 { 169 "name": "6", 170 "desc": "127.0.0.6", 171 "file": "E:\\MoRong\\AMP\\htdoc\\vhost6", 172 "url": "127.0.0.6" 173 }, 174 { 175 "name": "7", 176 "desc": "127.0.0.7", 177 "file": "E:\\MoRong\\AMP\\htdoc\\vhost7", 178 "url": "127.0.0.7" 179 }, 180 { 181 "name": "8", 182 "desc": "127.0.0.8", 183 "file": "E:\\MoRong\\AMP\\htdoc\\vhost8", 184 "url": "127.0.0.8" 185 }, 186 { 187 "name": "9", 188 "desc": "127.0.0.9", 189 "file": "E:\\MoRong\\AMP\\htdoc\\vhost9", 190 "url": "127.0.0.9" 191 } 192 ]; 193 194 // 公用功能 195 var morong = function() { 196 return { 197 // 获取ID 198 $$: function(id) { 199 return (!id) ? null : document.getElementById(id); 200 }, 201 // 返回事件目标 202 eventFun: function(event) { 203 var e = event || window.event; 204 return e.target || e.srcElement; 205 } 206 } 207 }(); 208 209 // 打开URL构造函数 210 function ProjectSearch(obj) { 211 this.url = morong.$$(obj.url); // 接收URL文本框 212 this.btn = morong.$$(obj.btn); // 打开按钮 213 this.list = morong.$$(obj.list); // 项目列表 214 this._type = morong.$$(obj._type); // 搜索类型 215 this.box = morong.$$(obj.box); // 弹出框 216 this.boxTxt = morong.$$(obj.boxTxt);// 弹出内容 217 this.dataUrl = obj.dataUrl; // 项目数据 218 this.len = this.dataUrl.length; // 项目数量 219 this.selType = "url"; // 选择类型 220 } 221 // 原型方法 222 ProjectSearch.prototype = { 223 constructor: ProjectSearch, 224 // 获取项目列表 225 getListDesc: function() { 226 var strHTML = "", i; 227 // 遍历项目 228 for (i = 0; i < this.len; i++) { 229 var d = this.dataUrl[i]; 230 strHTML += "<li data-name='"+d.name+"' title="+d.name+">"+d.desc+"</li>"; 231 } 232 // 插入数据 233 this.list.innerHTML = strHTML; 234 }, 235 // 获取URL并打开 236 getUrlContent: function(name) { 237 var val = name || this.url.value, 238 flag = false, 239 url; 240 // 如果是点击项目列表 241 if (!name) { 242 if (val == '') { 243 alert("内容不能为空！"); 244 return false; 245 } 246 } 247 // 判断类型 248 if (this.selType == "url") { 249 // 遍历查找内容 250 for (var i = 0; i < this.len; i++) { 251 if (this.dataUrl[i].name == val) { 252 url = "http://"+this.dataUrl[i].url; 253 break; 254 } 255 } 256 } else if (this.selType == "file") { 257 // 遍历查找内容 258 for (var i = 0; i < this.len; i++) { 259 if (this.dataUrl[i].name == val) { 260 url = this.dataUrl[i].file; 261 flag = true; 262 break; 263 } 264 } 265 } 266 // 如果没有找到 267 if (!url) { 268 alert("没有找到此项目，请重新输入！"); 269 return false; 270 } 271 // 判断打开url或显示文件路径 272 (!flag) ? window.open(url) : this.promptBox(url); 273 }, 274 classTag: function(target) { 275 var list = this._type.getElementsByTagName("li"), // 搜索类型列表 276 len = list.length; 277 for (var i = 0; i < len; i++) { 278 list[i].className = ""; // 移除所有class 279 } 280 target.className = "on"; // 添加给当前点击元素 281 this.selType = target.getAttribute("data-type"); // 设置类型 282 }, 283 // 提示框 284 promptBox: function(file) { 285 this.boxTxt.innerHTML = file; // 插入数据 286 this.box.style.display = "block"; // 显示 287 this.boxTxt.style.display = "block"; 288 }, 289 // 初始化 290 init: function() { 291 var _self = this; 292 _self.url.focus(); // 默认聚焦 293 _self.getListDesc(); // 展示项目列表 294 // 按钮监听 295 _self.btn.addEventListener("click", function() { 296 _self.getUrlContent(false); 297 }, false); 298 // 键盘回车键监听 299 document.addEventListener("keypress", function() { 300 if (event.keyCode == 13) { 301 _self.getUrlContent(false); 302 } 303 }, false); 304 // 绑定点击项目列表 - 事件委托 305 _self.list.addEventListener("click", function(event) { 306 var target = morong.eventFun(event); 307 if (target.nodeName.toLowerCase() == "li") { 308 //获取自定义属性内容并打开页面 309 _self.getUrlContent(target.getAttribute("data-name")); 310 } 311 }, false); 312 // 类型选择事件 313 _self._type.addEventListener("click", function(event) { 314 var target = morong.eventFun(event); 315 if (target.nodeName.toLowerCase() == "li") { 316 _self.classTag(target); 317 } 318 }, false); 319 // 点击弹出框背景隐藏弹出框 320 _self.box.addEventListener("click", function() { 321 if (this.style.display == "block") { 322 this.style.display = "none"; 323 _self.boxTxt.style.display = "none"; 324 } 325 }, false); 326 } 327 }; 328 // 实例化 329 var project = new ProjectSearch({ 330 url: "url", 331 btn: "urlBtn", 332 list: "searchList", 333 _type: "searchType", 334 box: "box", 335 boxTxt: "boxTxt", 336 dataUrl: dataUrl 337 }); 338 project.init(); 339 })(); 340 </script> 341 </body> 342 </html>
总结： 工作中总会需要查找以往的许多项目，或可以加入浏览器书签，或可直接把新增的项目数据存入数组中，都是为了提高工作效率，减少不必要的时间浪费。本功能只是个人的javascript练习，因为新手，代码组织不是很好，望大神指点优化，共勉之！
始终相信努力奋斗的意义，因为那是本质问题。
