Question

我正在尝试在我虚构的电影租赁网站中设置一个搜索功能，用户可以在其中填写一个表格，其中包含对电影片名，演员，导演，流派和国家的输入。现在设置搜索功能的方式是用户一次只能搜索一件事。例如，只能从certiain类型中查找电影，并且不允许更多规范。我想设置它，以便用户可以填写尽可能多的搜索字段，因为他们想要获得更具体的搜索，但我无法想出一个解决方案。任何提示和帮助将不胜感激。这是一个给你一个想法的搜索功能，所有这些功能大致相同：

function search_for_title(search) {

    var results = [];

    for (index in search_results) {

        title = search_results[index].otitle;
        movies_object[index].genres = genres_object[index]; //henter sjanger info fra genres_object databasen

        lowTitle = title.toLowerCase();
        lowSearch = search.toLowerCase();

        if (lowTitle.includes(lowSearch)) {
            results.push(movies_object[index]);
        }
    }
    displayResults(results);
}

这是函数的运行方式，我确信这是需要修改的代码的一部分：

window.onload = function() {
    query_params = get_query_string_parameters();
    search_results = movies_object;

    if (query_params.film_title) {
        search_for_title(query_params.film_title);
    }

    if (query_params.actor) {
        search_for_actor(query_params.actor);
    }

    if (query_params.director) {
        search_for_director(query_params.director)
    }

    if (query_params.genre) {
        search_for_genre(query_params.genre)
    }

    if (query_params.country) {
        search_for_country(query_params.country)
    }
}

Answer 1

如果你必须在前端做，你可以做这样的事情。

它将您的电影装箱并分阶段过滤电影，以便您可以使用多个属性进行过滤。过滤器的顺序是选择最具体的最不具体的过滤器，以期减少获得最终列表所需的循环。

＆＃13;

const movies = [
  { title: 'foo', actors: ['jack', 'jill'],  genre: 'comedy' },
  { title: 'bar', actors: ['jack', 'jane'],  genre: 'drama' },
  { title: 'baz', actors: ['josh', 'jane'],  genre: 'drama' },
  { title: 'box', actors: ['jed', 'regena'], genre: 'drama' }
]

const filterBy = (prop, value) => movies =>
  value === ''
    ? movies
    : movies.filter(movie => 
      Array.isArray(movie[prop])
        ? movie[prop].some(x => x === value)
        : movie[prop] === value
    )
    
const moviesToListItems = movies => 
  movies.map(movie => (
    `<div class="movie">
      <h4>${movie.title}</h4>
      <p>${movie.actors.join()}</p>
      <span>${movie.genre}</span>
    </div>`
  )).join('')

const filterMovies = ({ title, actors, genre }) => movies =>
  [movies]
    .map(filterBy('title', title))
    .map(filterBy('genre', genre))
    .map(filterBy('actors', actors))
    .map(moviesToListItems)
    .pop()

const el = selector => document.querySelector(selector)
const search = el('#search')
const output = el('#output')

const searchMovies = movies => e => {
  output.innerHTML = filterMovies({
    title: el('#title').value,
    actors: el('#actors').value,
    genre: el('#genre').value
  })(movies)
}
search.addEventListener('click', searchMovies(movies))

＆＃13;

body { font-family: sans-serif } div { display: flex; border: 1px solid #eee } .movie { display: flex; flex: 1; flex-direction: column } .movie > * { flex: 1 } h4 { margin: 0 }

＆＃13;

<form>
  <input name="title"  id="title"  placeholder="title" />
  <input name="actors" id="actors" placeholder="actor" />
  <input name="genre"  id="genre"  placeholder="genre" />
  <input type="button" id="search" value="search" />
</form>
<div id="output"></div>

＆＃13;

Answer 2

我知道这是旧的，但据我所知，我无法为这个问题找到一些好的解决方案。稍微思考一下这个问题，我认为有一个简单的解决方案，即向与搜索不匹配的表数据字段添加虚拟类。通过添加虚拟类，我们可以稍后检查具有该特定类的所有元素（在我的示例中为“隐藏”），我们最终将向父表行添加样式“显示：无”。还有一个退格按钮的事件侦听器，如果搜索输入与字段值相同，它将删除虚拟类。

另外，我来自 python 的世界，所以请不要介意我的 JS 不漂亮。

function myFunction(input_id, col, e) {
  e = e || event;
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById(input_id);
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("input")[col];
    if (td) {
      txtValue = td.value;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        td.style.display = ""
      } else {
        td.classList.add("hide")
      }
    }
  }


  if (e.keyCode == 8) {
    input = document.getElementById(input_id);
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("input")[col];
      if (td) {
        txtValue = td.value;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          td.classList.remove("hide")
        }
      }
    }
  }
  
  var allRows;
  allRows = document.getElementsByClassName("tbl_row")
  for (i = 0; i < allRows.length; i++) {
    allRows[i].style.display = ""
  }


  var searchHidden;
  searchHidden = document.getElementsByClassName("hide")
  for (i = 0; i < searchHidden.length; i++) {
    searchHidden[i].parentElement.parentElement.style.display = "none"
  }
}

<div class="equipment-preview">
  <table id="myTable">
    <thead>
      <tr>
        <th>Id</th>
        <th>Movie</th>
        <th>Genre</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" onkeyup="myFunction(id, 0)" id="movie_id" placeholder="search" class="searchField"></td>
        <td><input type="text" onkeyup="myFunction(id, 1)" id="movie" placeholder="search" class="searchField"></td>
        <td><input type="text" onkeyup="myFunction(id, 2)" id="genre" placeholder="search" class="searchField"></td>
      </tr>
      <tr class="tbl_row">
        <td><input type="text" value="1"></td>
        <td><input type="text" value="The Mask"></td>
        <td><input type="text" value="Comedy"></td>
      </tr>
      <tr class="tbl_row">
        <td><input type="text" value="2"></td>
        <td><input type="text" value="Fast and furious"></td>
        <td><input type="text" value="Action"></td>
      </tr>
      <tr class="tbl_row">
        <td><input type="text" value="3"></td>
        <td><input type="text" value="Home alone"></td>
        <td><input type="text" value="Comedy"></td>
      </tr>
      <tr class="tbl_row">
        <td><input type="text" value="4"></td>
        <td><input type="text" value="The Hangover"></td>
        <td><input type="text" value="Comedy"></td>
      </tr>
    </tbody>
  </table>
</div>

具有多个字段的Javascript高级搜索

2 个答案: