具有多個字段的 Javascript 高級搜索

Question

我正在嘗試在我的虛構電影租賃網站中設置一個搜索功能，用戶可以在其中填寫一個表單，該表單可以輸入電影名稱、演員、導演、類型和國家。 現在搜索功能的設置方式是用戶一次只能搜索一件事。 例如，只能找到特定類型的電影，不允許有更多的規范。 我想設置它以便用戶可以填寫盡可能多的搜索字段以獲得更具體的搜索，但我無法提出解決方案。 任何提示和幫助將不勝感激。 這是一個可以讓您了解的搜索功能，所有這些功能都大致相同：

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

如果必須在前端執行此操作，則可以執行以下操作。

它可以將電影裝箱並分階段過濾電影，以便您可以使用多個屬性進行過濾。 過濾器按照選擇最具體到最不具體的過濾器的順序進行，以期減少獲得最終列表所需的循環。

 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)) 

 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 } 

 <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> 

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>