Bootstrap Search Box Click

.hide{  opacity: 0;  max-height: 0;}
#trigger {  position: absolute;  left: -999em;}
#container input[type="checkbox"]:checked + div{  max-height: 99em;  opacity: 1;  height: auto;  overflow: hidden;}

<div id="container"> <label for="trigger">click me for Search</label>   <input type="checkbox" id="trigger">  <div class="hide">    <form>        <input type="text" name="search" placeholder="Search..">    </form>  </div><div>

Bootstrap 4: search input x clear search

I think that input-group-addon is the problem.

Try this:

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
    <button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;">
      <i class="fa fa-times"></i>
    </button>
</div>

This looks like this:

how to empty search box on click event in wenzhixin bootstrap table without refresh page?

When you click on the clear button so search box value reset and you search again new fresh data.

$('#clear').on("click",function() {
     $('#bootstrap_table_ID').bootstrapTable("resetSearch","");
 });

How to add toggle full width search box to the Navbar in Bootstrap 4?

Change the Navbar as needed for Bootstrap 4. Notice the structure has changed. It now uses flexbox, the input-group classes, nav-item, etc.. are all different...

I used this tool to convert the Navbar structure from 3 to 4. Then adjust the input-group classes...

<nav class="navbar navbar-light bg-light fixed-top navbar-expand-sm" role="navigation">
    <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> ☰
        </button> <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active nav-item"><a href="#" class="nav-link">Link</a>
                </li>
                <li class="nav-item"><a href="#" class="nav-link">Link</a>
                </li>
                <li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item"><a href="#">Action</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav ml-auto">
                <li class="nav-item"><a href="#" class="nav-link">Link</a>
                </li>
                <li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item"><a href="#">Action</a>
                        </li>
                        <li class="dropdown-item"><a href="#">Another action</a>
                        </li>
                        <li class="dropdown-item"><a href="#">Something else here</a>
                        </li>
                        <li class="divider dropdown-item"></li>
                        <li class="dropdown-item"><a href="#">Separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <form class="d-flex" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-append">
                        <button type="reset" class="btn btn-secondary">
                            <span class="fa fa-remove">
                            <span class="sr-only">Close</span>
                            </span>
                        </button>
                    </div>
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-secondary">
                            <span class="fa fa-search">
                        <span class="sr-only">Search</span>
                            </span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</nav>

You'll also need to modify the CSS. The padding for the buttons, height, etc..

@media (min-width: 768px) {
    .navbar-collapse {
        padding-top: 0px !important;
        padding-right: 38px !important;
    }
    .navbar-collapse form[role="search"] {
        width: 38px;
    }
    .navbar-collapse form[role="search"] input {
        font-size: 15pt;
        opacity: 0;
        display: none;  
    }
    .navbar-collapse form[role="search"].active {
        width: 100%;
    }
    .navbar-collapse form[role="search"].active button,
    .navbar-collapse form[role="search"].active input {
        display: table-cell;
        opacity: 1;
    }
}

https://www.codeply.com/go/mLnFOWZqVo

Bootstrap Search Bar adding "?search=" to router

you can catch the search parameter(query url) in vue-router with this.$route.query.search for your example and when the user click the button just push the user with this query like this

this.$router.push({ name: 'your-route-name', query: { 'search': this.$route.query.search } })

Bootstrap Search Box uses the wrong url

The <form>in the {% if ... %}case has no specified action="..." in your template:

{% if user.is_authenticated %}
    ...
    <form class="form-inline my-2 my-lg-0" action="{% url 'search_results' %}" method="get">    
        <input class="form-control mr-sm-2" name='q' type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit" value='Search'>Search</button>
    </form>
{% else %}
    ...
{% endif %}

How can i show the input search list when writing inside the input and also when a button in clicked

I don't know if you need this way or not .But , you can create new ul which will only have those options which matches the search value and then append these values to some div.In below code snippet i have use $(".dropdown-menu > li a").each.. to loop through the dropdown and get required result .

Demo Code :

$("#search-box").keyup(function() {
  var uls = "";
  //empty any result under results div
  $(".results").empty();
  var search = $(this).val().toUpperCase();
  //checking if seacrh is not empty
  if (search != null && search != "") {
    uls = "<ul class='results'>";
    //looping through li
    $(".dropdown-menu  > li a").each(function() {
      //checking if value of <a> and search same
      if ($(this).text().toUpperCase().indexOf(search) > -1) {
        //append that value to show under results
        uls += "<li><a href='#'>" + $(this).text() + "</a></li>";

      }
    });
    uls += "</ul>";
    //add to div
    $("#result").html(uls);
  }


})

#search-box {
  border-style: none;
}

.divider-border {
  border-right: 2px solid #DFD6D6!important;
  height: auto;
}

.search-radius {
  border-radius: 5px 0px 0px 5px !important;
  height: 3rem;
  background: #EEEEEE;
}

.btn-default {
  border-radius: 0px 5px 5px 0px !important;
  background: #EEEEEE;
}

input[type=search]:focus {
  outline: none !important;
  outline-width: 0 !important;
  background: white !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

input:focus~.btn-default {
  background: white !important;
}

.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none;
}

.results {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.results li a {
  border: 1px solid #ddd;
  background-color: #f6f6f6;
  padding: 12px;
  font-size: 18px;
  color: black;
  display: block
}

<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <!-- Searchbar -->
    <div class="col-6">
      <div class="input-group mt-4">
        <div class="input-group-btn search-panel">
          <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="search" class="form-control search-radius" name="search-template" placeholder="Search or select template " id="search-box">
        <span class="divider-border"></span>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>

      </div>
    </div>
    <!-- /Searchbar -->

  </div>
  <div class="row">
    <div class="col-6">
      <div id="result">
      <!--search result will come here-->
      </div>
    </div>
  </div>
</div>