twitter-bootstrap 带有过滤器引导程序的搜索栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32639759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Search bar with filter bootstrap
提问by Eitan K
How would I go about implementing a search bar with a filter, just like the one mentioned here: bootstrap amazon style search bar
我将如何使用过滤器实现搜索栏，就像这里提到的那样：bootstrap amazon style search bar
All the ones I see on bootstraps pagerefers to drop down lists with redirects, not select lists:
我在引导程序页面上看到的所有内容都是指带有重定向的下拉列表，而不是选择列表：
This is what I have so far but it doesn't look that great and I am unsure if I am doing it correctly.
到目前为止，这是我所拥有的，但看起来并不那么好，我不确定我是否做得正确。
<div class="col-md-9 col-md-push-1 ">
<h3 class="text-center">Manage Users</h3>
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<select class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<option>All</option>
<option>Username</option>
<option>Email</option>
<option>Student Code</option>
</select>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
回答by Aziz
Well, I believe you need to wrap the inputs in a formtag which is missing in your code. Also the selecttag requires a nameattribute and the optionsmust have a valueset.
好吧，我相信您需要将输入包装在form代码中缺少的标签中。此外，select标签需要一个name属性，并且options必须有一个value集合。
The dropdown menu should work as expected and there is no need for the hidden input - just simply parse the value from the selecttag.
下拉菜单应该按预期工作，不需要隐藏输入 - 只需简单地解析select标签中的值。
HTML Code (ignore the bootstrap library links) - JSFiddle
HTML 代码（忽略引导库链接） - JSFiddle
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9 col-md-push-1">
<h3 class="text-center">Manage Users</h3>
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="get" id="searchForm" class="input-group">
<div class="input-group-btn search-panel">
<select name="search_param" id="search_param" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<option value="all">All</option>
<option value="username">Username</option>
<option value="email">Email</option>
<option value="studentcode">Student Code</option>
</select>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</form><!-- end form -->
</div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end col-md-9 -->If it doesn't work then it can be a javascript issue which refreshes the page every time you select an option...
如果它不起作用，那么它可能是一个 javascript 问题，每次选择一个选项时都会刷新页面...
