又是好久没有更新文章了，技术差，人又懒是重罪啊！！
在工作中每天都要查找目前正在接手的项目，而如果项目一多起来怎么办呢？ 最近主管突然说要找一下以前的项目改一点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 ];