引导亚马逊样式搜索栏 [英] bootstrap amazon style search bar

问题描述

在bootstrap中有一个简单的方法来做类似的事情吗？带有用于不同类别的下拉选择器的搜索栏？我一直在查看他们的文档，类似于

Is there an easy way to do something similar to this in bootstrap? A search bar with a drop down selector for a different category? I've been looking through their documentation, something similar to this but with the dropdown being attached to the search bar is what I'm looking for. I want it to be part of my navbar. I recall seeing an example online but can't seem to find it now. Also wondering where it would go in relation to my header at the moment

<header class="navbar navbar-fixed-top navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <nav>
            <ul class="nav pull-left">
              <li><%= link_to 'New Review', 
              if (current_user) 
                new_review_path 
              else
                log_in_path
              end %></li>
            </ul>
          </nav>
          <nav>
            <ul class="nav pull-right">
              <li><%= link_to "Home",    '/' %></li>
              <li><%= link_to "Help",    '#' %></li>
              <% if current_user %>
                <li><%= link_to "Log out", log_out_path %>
              <% else %>
                <li><%= link_to "Sign up", sign_up_path %></li>
                <li><%= link_to "Log in", log_in_path %></li>
              <% end %>
            </ul>
          </nav>
        </div>
      </div>
    </header>

解决方案

Please, refer this it satisfied your requirement HTML:

<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">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span id="search_concept">Filter by</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#contains">Contains</a></li>
                      <li><a href="#its_equal">It's equal</a></li>
                      <li><a href="#greather_than">Greather than ></a></li>
                      <li><a href="#less_than">Less than < </a></li>
                      <li class="divider"></li>
                      <li><a href="#all">Anything</a></li>
                    </ul>
                </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>

CSS:

body{
    margin-top:20px;
}

JS:

$(document).ready(function(e){
    $('.search-panel .dropdown-menu').find('a').click(function(e) {
        e.preventDefault();
        var param = $(this).attr("href").replace("#","");
        var concept = $(this).text();
        $('.search-panel span#search_concept').text(concept);
        $('.input-group #search_param').val(param);
    });
});

Refer this link http://bootsnipp.com/snippets/featured/search-panel-with-filters

这篇关于引导亚马逊样式搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！