按多个标签过滤网站列表

值班亚历克斯

我有这个页面可以按标签搜索网站，但我有 3 个问题：

1) 如果将另一个站点添加到列表中（站点 4），为什么它不再起作用？

2) 网站链接应该插入哪里？

3) 有什么办法可以隐藏页面中显示的标签吗？

var data = 
[
  	{
    	"name": "Site 1",
      "tags": ["1", "2", "3"]
    },
  	{
    	"name": "Site 2",
      "tags": ["1", "2"]
    },
  	{
    	"name": "Site 3",
      "tags": ["2", "3"]
    }
]

window.search = function() {

	var toSearch = document.getElementById("myInput").value.toUpperCase();
  var filterFunction = function(element) {
  	return false;
  }
  if (toSearch.length) {
  	var tagsProvided = toSearch.split(/[ ,\t]/);
    filterFunction = function(element) {
    	var keep = true;
      for (var i = 0; i < tagsProvided.length; ++i) {
         var tagProvided = tagsProvided[i];
         if (tagProvided.length < 1) continue;
         
         var currentTagFound = false;
         for (var j = 0; j < element.tags.length; ++j) {
         	 currentTagFound |= (tagProvided.toUpperCase() == element.tags[j].toUpperCase());
         }
         keep &= currentTagFound;
      }
      return ! keep;
    }
  }
  
  ul = document.getElementById("myUL");
  
  while (ul.lastChild) {
    ul.removeChild(ul.lastChild);
  }
  
  for (var i = 0; i < data.length; ++i) {
    var element = data[i];
  	if (filterFunction(element)) continue;
    
    var li = document.createElement("li");
    
    var a = document.createElement("a");
    a.appendChild(document.createTextNode(element.name + " (" + element.tags.join(", ") + ")"));
    a.setAttribute("href", "#");
    
    li.appendChild(a);
    ul.appendChild(li);
  }  
}

search();

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<body>
<h2>My WebSites</h2>

<input type="text" id="myInput" onkeyup="search()" placeholder="Search for tags.." title="Type in a tag">

<ul id="myUL">
</ul>

何塞·马克斯

这里有你想要的。

var data = 
[
  	{
    	"name": "Site1",
      "link":"stackoverflow.com/questions/44601766/filter-a-list-of-sites-by-multiple-tags",
      "tags": ["1", "2", "3"]
    },
  	{
      "name": "Site2",
      "link": "www.w3schools.com",
      "tags": ["1", "2"]
    },
  	{
    	"name": "Site 3",
      "tags": ["2", "3"]
    },
    {
    	"name": "Site 4",
      "tags": ["4", "3"]
    },
     {
    	"name": "Site 5",
      "tags": ["4", "2", "5"]
    }
]

window.search = function() {

	var toSearch = document.getElementById("myInput").value.toUpperCase();
  var filterFunction = function(element) {
  	return false;
  }
  if (toSearch.length) {
  	var tagsProvided = toSearch.split(/[ ,\t]/);
    filterFunction = function(element) {
    	var keep = true;
      for (var i = 0; i < tagsProvided.length; ++i) {
         var tagProvided = tagsProvided[i];
         if (tagProvided.length < 1) continue;
         
         var currentTagFound = false;
         for (var j = 0; j < element.tags.length; ++j) {
         	 currentTagFound |= (tagProvided.toUpperCase() == element.tags[j].toUpperCase());
         }
         keep &= currentTagFound;
      }
      return ! keep;
    }
  }
  
  ul = document.getElementById("myUL");
  
  while (ul.lastChild) {
    ul.removeChild(ul.lastChild);
  }
  var newhrefid;
  for (var i = 0; i < data.length; ++i) {
    var element = data[i];
  	if (filterFunction(element)) continue;
    
    var li = document.createElement("li");
    
   var a = document.createElement("a");
  a.appendChild(document.createTextNode(element.name));
    a.setAttribute("href", "http://"+element.link);
   li.appendChild(a);
   ul.appendChild(li);
  }  
}

search();

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>My WebSites</h2>

<input type="text" id="myInput" onkeyup="search()" placeholder="Search for tags.." title="Type in a tag">

<ul id="myUL">
</ul>

有任何疑问，请寻求我的帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。