js实现关键词筛选_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

js实现关键词筛选

来源：未知作者：类型：文章教程点击次数：发布时间：2017-03-25 13:58:30

移植自天地图的js关键词筛选功能，点击筛选的关键词，自动将关键词放到筛选区。点击筛选区关键词后面的删除按钮，自动将关键词按照筛选之前的顺序，放回原地：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现关键词筛选 - 我爱模板网 www.5imoban.net</title> <style> * { margin:0; padding:0; } body { font-family:"宋体"; font-size:12px; } dd,dl,dt,em,h1,h2,h3,h4,h5,img,p { padding:0; margin:0; font-style:normal; font-weight:400; list-style:none; font-size:12px } a,form,li,ol,ul { padding:0; margin:0; list-style:none } a { text-decoration:none } img { border:none } .rt_top { width:713px; border-bottom:1px solid #ebebeb; margin-left:20px; overflow:auto } .rt_top_le { float:left; display:inline; font-size:13px; font-weight:700; color:#333; margin:10px 15px 0 0; padding-bottom:13px; padding-top:2px } .rt_top_rt { float:left; display:inline; width:557px; padding-top:10px } .xu { float:left; display:inline; height:18px; border:1px solid #ccc; margin:0 10px 10px 0 } .xu_le { float:left; display:inline; text-align:center; line-height:18px; padding:0 10px; color:#333 } .xu_rt { float:left; display:inline; width:20px; background:#eee; height:15px; text-align:center; padding-top:3px; cursor:pointer } .pub { margin:8px 0 0 } .publeft { float:left; display:inline; width:133px; height:20px } .pubright { float:left; display:inline } .pubright a { cursor:pointer } .pub a { color:#5595dd; margin-right:22px } </style> </head> <body> <div id="keywords"> <div class="rt_top"> <div class="rt_top_le">按关键词筛选：</div> <div class="rt_top_rt" id="keword_select"></div> </div> <div class="pub"> <div class="publeft"></div> <div class="pubright" id="keword_deselect"> <a id="政务" data-t="8">政务</a> <a id="网点管理" data-t="7">网点管理</a> <a id="城市管理" data-t="6">城市管理</a> <a id="公共服务" data-t="5">公共服务</a> <a id="交通" data-t="4">交通</a> <a id="应急管理" data-t="3">应急管理</a> <a id="旅游" data-t="2">旅游</a> <a id="环境保护" data-t="1">环境保护</a> </div> </div> </div> <script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> <script> Keyword = { SELECT_OBJ: document.getElementById("keword_select"), DESELECT_OBJ: document.getElementById("keword_deselect"), init: function() { Keyword.initEvent(), Keyword.initSearch() }, initEvent: function() { $("#keword_select>div>div>img").live("click",function() { Keyword.moveToDeselect(this, Keyword.reflashSearchHandler) }), $("#keword_deselect>a").live("click",function() { Keyword.moveToSelect(this, Keyword.reflashSearchHandler) }) }, getAllSelectKeywords: function() { for (var a = $("#keword_select>div>.xu_le"), b = [], c = 0, d = a.length; d > c; c++) b.push(a[c].id); return b }, getAllDeselectKeywords: function() { for (var a = $("#keword_deselect>a"), b = [], c = 0, d = a.length; d > c; c++) b.push(a[c].id); return b }, addToDeselect: function(a, b, c) { Keyword.SELECT_OBJ.innerHTML = "", Keyword.DESELECT_OBJ.innerHTML = ""; for (var d = "",e = 0,f = a.length; f > e; e++) d += '<a id="' + a[e].key + '" data-t="' + parseInt(f - e) + '">' + a[e].key + "</a>"; Keyword.DESELECT_OBJ.innerHTML = d, b && b(c) }, moveToDeselect: function(a, b) { var c = $(a).parent().parent(), d = c.find(".xu_le"), e = $(d).data("t"), f = document.createElement("a"); f.id = d[0].id, f.innerHTML = d[0].id, Keyword.DESELECT_OBJ.appendChild(f), $(f).attr("data-t", e), Keyword.sort(), Keyword.SELECT_OBJ.removeChild(c[0]), b(!1) }, moveToSelect: function(a, b) { var c = $(a).data("t"), d = document.createElement("div"); d.className = "xu", d.innerHTML = '<div class="xu_le" data-t="' + c + '" id="' + a.id + '">' + a.id + '</div><div class="xu_rt"><img src="http://www.5imoban.net/view/demoimg/close.png" /></div>', Keyword.SELECT_OBJ.appendChild(d), Keyword.DESELECT_OBJ.removeChild(a), b(!1) }, reflashSearchHandler: function() { APP.Page.update("searchInit") }, searchHandler: function(a) { APP.Page.update(a) }, recommendAppHandler: function() { APP.index.NOW_MODE = "recommendApp", APP.index.deselectedAllInOtherTrees(""), APP.Page.update("recommendApp") }, sort: function() { //排序，将关键词放回原来的地方 var a = $(Keyword.DESELECT_OBJ), b = a.find("a"), c = b.sort(function(a, b) { var c = $(a).data("t"), d = $(b).data("t"); return d > c ? 1 : c > d ? -1 : 0 }); a.empty(); for (var d = 0, e = c.length; e > d; d++) { var f = c[d]; a.append(f) } } } Keyword.init(); </script> </body> </html>
提示：您可以先修改部分代码再运行