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

时间:2017-05-04 10:13:02

标签: javascript database list if-statement search

我正在尝试在我虚构的电影租赁网站中设置一个搜索功能,用户可以在其中填写一个表格,其中包含对电影片名,演员,导演,流派和国家的输入。现在设置搜索功能的方式是用户一次只能搜索一件事。例如,只能从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)
    }
} 

2 个答案:

答案 0 :(得分:1)

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

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



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;
&#13;
&#13;

答案 1 :(得分:0)

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

另外,我来自 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>