javascript - 如何根据网络中的单个字段进行多重搜索

Question

我正在使用 Laravel 构建一个网站，我想创建一个类似表单的搜索，用户可以在其中搜索不同类型的电影。问题是，当我尝试使用超过 1 个流派时，它仅显示为每个字段选择的最后一个选项。例如，我的搜索选项是流派和年份，我尝试输入喜剧、浪漫、 Action 、1992 年、2005 年，但只输出 2005 年的 Action 电影。

所有数据都存储在 MySQL 数据库中，我使用了基本的复选框进行输入，数据出现在 URL 中并进行搜索，但仅适用于每个字段上的选项之一。

<form action="/home" method="GET">
    <hr>
    <h4>Genre</h4><br>
    @foreach($movies as $movie)
        <input type="checkbox" name="genre" value="{{$movie->genre}}">{{$movie->genre}}<br>
    @endforeach
    <hr>
    <h4>Year</h4>
    @foreach($movies as $movie)
        <input type="checkbox" name="year" value="{{$movie->year}}">{{$movie->year}}<br>
    @endforeach
    <input type="submit" class="btn btn-success" value="Search"><br>
</form>

这个想法是，如果用户输入喜剧、浪漫、 Action 、1992、2005，输出将显示 1992 年和 2005 年的喜剧电影、 Action 电影和浪漫电影。

编辑

这是我的 Controller ，我在其中进行搜索和分页。

public function index(Request $request)
{
$movies = \DB::table('movies');

$queries = [];

$columns = [
  'genre','year'
];

foreach ($columns as $column) {
    if (request()->has($column)) {
        $movies = $movies->where($column, request($column));
        $queries[$column] = request($column);
    }
}
$movies = $movies->orderBy('created_at', 'desc')->paginate(20)->appends($queries);
return view('home', compact('movies'));
}

Answer 1

如果您允许用户选择多个流派和年份值，则您的输入需要是数组。更改 name 属性以使用 []:

@foreach($movies as $movie)
<input type="checkbox" name="genre[]" value="{{ $movie->genre }}">{{ $movie->genre }}<br/>
@endforeach
...
@foreach($movies as $movie)
<input type="checkbox" name="year[]" value="{{ $movie->year }}">{{ $movie->year }}<br/>
@endforeach

由于您省略了[]，因此只有最后选定的具有相同名称的复选框才会发送到服务器。这样，在后端，您的值应该是数组:

$selectedGenres = $request->input("genre");
// ["comedy", "romance", ...];

$selectedYears = $request->input("year");
// ["1990", "2019", ...];

然后您可以在简单的查询中使用它:

$foundMovies = Movie::whereIn("genre", $selectedGenres)
->whereIn("year", $selectedYears)
->get();

如果没有选择genre或year值，您可能必须忽略搜索，但这可以通过验证来完成:

"genre" => "required|array|min:1",
"year" => "required|array|min:1"

或支票:

if(count($selectedGenres) != 0){ ... }