javascript - CSS & JS - 搜索时更新位置

Question

我制作了一个网格，用户可以在其中搜索，如果其中一个元素具有搜索到的词，或者至少其中的一部分，则在所有可搜索元素都具有的自定义“搜索”标签中，元素将被设置为隐藏或可见。

为了更好的理解，请测试一下here .

我想做但现在还不知道如何更新元素的位置，这样它们就不会消失。

有人可以给出“北方”如何做到这一点吗？

代码:

• > Full Code
• > Only JS
• > Only CSS
• > Only HTML

Answer 1

您需要每个 .game 都保留在文档流中，因此在这种情况下您应该避免绝对定位。

花一些时间了解现代布局技术，例如 flexbox 和网格。避免使用 id 选择器设置样式，而是使用可重用的类编写样式。

function searchGames() {
  var input, filter, i, searchables; //Variables
  input = document.getElementById("search-bar"); //Get Search-Box
  filter = input.value.toUpperCase(); //Get Searched Word
  searchables = document.querySelectorAll('[search]'); //Get a NodeList of all nodes with the tag "search=*"

  //Turns the NodeList into an array (array)
  var array = [];
  for (var index = searchables.length; index--; array.unshift(searchables[index]));

  //Puts all the searchable names in an array
  var names = []; //Array with all searchable names (search tag) - Dic Values
  var ids = []; //ID's of searchable itens. In the same order of the names - Dic Keys
  var games = {}; //Dictionay with ID as key and searchable name as value
  for (i = 0; i < searchables.length; i++) {
    var name = array[i].attributes[2].value;
    var id = array[i].attributes[0].value;
    names.push(name);
    ids.push(id);
  }

  //Adds the keys e value to the dic "games"
  ids.forEach((key, i) => games[key] = names[i]);

  //Search Method
  for (i = 0; i < searchables.length; i++) {
    var div = document.getElementById(ids[i]); //Get the elements to hide/show
    var text = names[i]; //Get the searchable name
    text = text.toUpperCase() //Disables case sensitive

    console.log(text)
    //Check if the filter matches a searchable name
    //TODO: Update position. Now it only hides the element
    if (text.indexOf(filter) > -1) {
      //Allows the element to be visible
      div.style.display = "";
    } else {
      //Hides the element 
      div.style.display = "none";
    }

  }

}

:root {
  --games-blur: 3px;
  --games-width: 150px;
  --play-btn-width: 40px;
}

.gameslist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.play_btn {
  height: var(--play-btn-width);
  width: var(--play-btn-width);
  visibility: hidden;
}

.games {
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: lightgray;
  height: var(--games-width);
  width: var(--games-width);
  transition: all 0.03s ease-in-out;
}

.games:hover {
  transform: scale(1.25);
  filter: blur(var(--games-blur));
}

.games:hover .play_btn {
  visibility: visible;
}

#search-bar {
  background-image: url("https://www.w3schools.com/css/searchicon.png");
  background-position: 10px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 2px solid #5e9fd7;
  margin-bottom: 12px;
}

<input type="text" id="search-bar" onkeyup="searchGames()" placeholder="Procurar" />

<div class="gameslist">
  <div id="pong" class="games" search="pong"><img class="play_btn" src="https://i.imgur.com/lFDDBjz.png" /></div>
  <div id="fut-mesa" class="games" search="futebol de mesa"><img class="play_btn" src="https://i.imgur.com/lFDDBjz.png" /></div>
  <div id="forca" class="games" search="forca"><img class="play_btn" src="https://i.imgur.com/lFDDBjz.png" /></div>
  <div id="dama" class="games" search="damas"><img class="play_btn" src="https://i.imgur.com/lFDDBjz.png" /></div>
  <div id="pacman" class="games" search="pacman"><img class="play_btn" src="https://i.imgur.com/lFDDBjz.png" /></div>
  <div id="quick-math" class="games" search="quick math"><img class="play_btn" src="https://i.imgur.com/lFDDBjz.png" /></div>
</div>