我使用Laravel和Bootstrap创建的网站有一个搜索栏和一个下拉列表,可以将搜索范围缩小到特定类别。以下是搜索栏的以下代码:
display:none
当我输入&#34; hello world&#34;进入搜索栏并提交表单,我会被重定向到此网址:<div class="container">
<form id="search_form" method="get" action="{{ route('search') }}">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span name="category" id="search_concept">Title</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#title">Title</a></li>
<li><a href="#author">Author</a></li>
<li><a href="#school">School</a></li>
<li><a href="#course_code">Course Code</a></li>
</ul>
</div>
<!--<input type="hidden" name="_token" value="{{ Session::token() }}">-->
<input class="form-control" name="term" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text" id="filter">
<span id="search_submit" type="submit" class="btn input-group-addon glyphicon glyphicon-search" style="width:1%;"></span>
</div>
</div>
</div>
</form>
</div>
我还要选择下拉列表中的选定值,因此当我选择“标题”时,作为我在下拉列表中的类别并提交表单,我将被重定向到:
http://localhost:8000/search?term=hello+world
我该如何处理?
答案 0 :(得分:0)
您可以像这样修改它并使用jQuery / js
<div class="container">
<form id="search_form" method="get" action="{{ route('search') }}">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span name="category" id="search_concept">Title</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-category="title" class="search_category" href="#title">Title</a></li>
<li><a data-category="author" class="search_category" href="#author">Author</a></li>
<li><a data-category="school" class="search_category" href="#school">School</a></li>
<li><a data-category="course_code" class="search_category" href="#course_code">Course Code</a></li>
</ul>
</div>
<!--<input type="hidden" name="_token" value="{{ Session::token() }}">-->
<input type="hidden" name="category" id="category"/>
<input class="form-control" name="term" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text" id="filter">
<span id="search_submit" type="submit" class="btn input-group-addon glyphicon glyphicon-search" style="width:1%;"></span>
</div>
</div>
</div>
</form>
</div>
jQuery的:
$(".search_category").click(function(e){
$("#category").val($(this).attr("data-category"));
});