我有这个页面按标签搜索网站,但我有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();
&#13;
* {
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;
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
这里有你想要的东西。
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();
&#13;
* {
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;
}
&#13;
<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>
&#13;
有任何疑问,请求我的帮助。