Javascript erweiterte Suche mit mehreren Feldern

Question

Ich versuche eine Suchfunktion in meiner fiktiven Filmverleih Website einzurichten, wo der Benutzer ein Formular ausfüllen kann, die Eingaben zu den Filmtitel, Schauspieler, Regisseur, Genre und Land. Die Suchfunktion ist so eingerichtet, dass der Benutzer immer nur eine Sache suchen kann. Finde zum Beispiel nur Filme aus einem bestimmten Genre und keine weiteren Spezifikationen sind erlaubt. Ich möchte es so einrichten, dass der Benutzer so viele Suchfelder ausfüllen kann, wie er möchte, um eine spezifischere Suche zu erhalten, aber ich kann keine Lösung finden. irgendwelche Tipps und Hilfe würden geschätzt werden. hier ist eine der Suchfunktionen Ihnen eine Vorstellung zu geben, alle von ihnen sind in etwa gleich:

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

Dies ist, wie die Funktionen ausführen, ich bin sicher, dass dies der Teil des Codes ist, dass sein muss geändert:

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

Wenn Sie es Frontend tun müssen, könnten Sie etwas wie das tun.

es ist Ihre Filme einpacken und filtert die Filme in Etappen, so dass Sie mit mehreren Attributen filtern können. Die Filter laufen in der Reihenfolge ab, um die spezifischsten für die am wenigsten spezifischen Filter zu wählen, in der Hoffnung, die Schleifen zu reduzieren, die erforderlich sind, um die endgültige Liste zu erhalten.

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>