如何添加引导搜索栏的功能

时间:2015-07-12 13:34:39

标签: html css twitter-bootstrap search

我的网站上设置了导航栏,我在导航栏右侧设置了一个搜索栏,请参阅下面的代码

    <nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand text-danger" href="index.php">Network TV</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapsible">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#section1">Home</a></li>
                <li><a href="#section2">Top rated</a></li>
                <li><a href="#section3">Most Popular by Genre</a></li>
                <li><a href="#section4">Music</a></li>
                <li><a href="#section5">Suggestions</a></li>
                <li id="adminpanel"><a href="admin/data_display.php">Admin control panel</a></li>
                <li>&nbsp;</li>
                        <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>
            </ul>
        </div>
    </div>
  </div>
</nav>

我想知道如何在用户在搜索栏中输入信息时将结果显示在引导程序模式中。例如,他们输入“电影”电影模式会弹出电影名称。这是搜索栏的近距离观察

 <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>

2 个答案:

答案 0 :(得分:0)

这取决于您计划如何获取数据。如果我说得对,那么你只想对某些电影数据库发出POST / GET请求。看起来像php,也许是Wordpress / Drupal,所以猜测它是一个MySQL请求。

这是PHP学院的一个(免费)教程,Alex是一位优秀的导师。

PHPAcademy视频: https://www.youtube.com/watch?v=Yb3c-HljFro

干杯。

答案 1 :(得分:0)

function getMinimumUniqueSum(arr) {
    // [1,1,2] => [1,2,3] = 6
    // [1,2,2,3,3] = [1,2,3,4,5] = 15
    if (arr.length > 1) {
        var sortedArr = [...arr].sort((a, b) => a - b);
        var current = sortedArr[0];
        var res = [current];

        for (var i = 1; i + 1 <= arr.length; i++) {
            // check current equals to the rest array starting from index 1.
            if (sortedArr[i] > current) {
                res.push(sortedArr[i]);
                current = sortedArr[i];
            } else if (sortedArr[i] == current) {
                    current = sortedArr[i] + 1;
                    // sortedArr[i]++;
                    res.push(current);
                } else {
                   current++;
                   res.push(current);
            }
        }

        return res.reduce((a,b) => a + b, 0);
    } else {
        return 0;
    }
}