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