JS實現項目查找功能

時間 2019-12-10

原文原文鏈接

　　又是很久沒有更新文章了，技術差，人又懶是重罪啊！！ javascript

　　在工做中天天都要查找目前正在接手的項目，而若是項目一多起來怎麼辦呢？最近主管忽然說要找一下之前的項目改一點BUG，而後我就找了半天才找到對應的文件夾。這就嚴重影響了工做時間。故此，花了一點時間作了一下公司的項目查找功能，方便之後項目的查找，減小在這個上面的時間。html

需求以下：java

　　一、項目查找分爲URL地址及文件夾路徑node

　　二、輸入相應的項目名稱(拼音),回車便可打開對應的項目URL或顯示文件夾路徑gulp

　　三、顯示以往項目列表，點擊便可查看相應數據數組

效果實現：瀏覽器

　 1、頁面結構及樣式( html結構及樣式就很少作解釋)ide

 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 ];

View Code

　　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>