在网站中实现搜索栏以便使用标签进行搜索

时间:2015-10-27 05:27:26

标签: javascript jquery css html5 twitter-bootstrap

我已经JS Fiddle

<div class="container">
<div class="row">    
    <div class="col-md-8 col-md-offset-2 col-xs-12">
        <div class="input-group user-search">
            <div class="input-group-btn country-search">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span id="search_concept">Select Country</span> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#contains">India</a></li>
                    <li><a href="#its_equal">UK</a></li>
                    <li><a href="#greather_than">US</a></li>
                    <li><a href="#less_than">Pakistan</a></li>
                    <li class="divider"></li>
                    <li><a href="#all">All Countries</a></li>
                </ul>
            </div>
            <div class="input-group-btn city-search">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span id="search_concept">Select City</span> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#contains">Mumbai</a></li>
                    <li><a href="#its_equal">Chennai</a></li>
                    <li><a href="#greather_than">Kolkata</a></li>
                    <li><a href="#less_than">Delhi</a></li>
                    <li class="divider"></li>
                    <li><a href="#all">All Cities</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="fa fa-search"></span></button>
                    </span>
                    </div>
                </div>
        </div>
    </div>

我正在使用bootstrap。现在,我想使用标签实现搜索,就像在提问时(在自动完成时)在堆栈溢出时添加标签一样。任何人都可以帮我这样做吗?

1 个答案:

答案 0 :(得分:2)

typehead

input标记中的bootstrap demo {{3}}

我希望你的意思。