Is there a way to display the search input list while typing in the input field and when a button is pressed?

How can I show the dropdown list next to the search input both when typing in the input and clicking the button?

Here's a visual representation of how it should look:

View the image here

#search-box { border-style:none; } [...] 
<!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <!-- 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">
              <!-- Our css -->
              <link rel="stylesheet" href="style.css">
              <title>Emails View</title>
            </head>
            <body>
              <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">
                          [...]
                       </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>
               </div>
             </div>
           </div>
        
       <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>

         </body>
     </html>

Answer №1

If you're unsure about the method required, you can consider creating a new ul specifically containing options that match the search value, and then appending these values to a specific div. The code snippet below demonstrates the use of

$(".dropdown-menu  > li a").each..
for looping through the dropdown and retrieving the necessary results.

Check out the Demo Code below:

$("#search-box").keyup(function() {
  var uls = "";
  // Clear any existing results under the 'results' div
  $(".results").empty();
  var search = $(this).val().toUpperCase();
  // Check if the search is not empty
  if (search != null && search != "") {
    uls = "<ul class='results'>";
    // Loop through the li elements
    $(".dropdown-menu  > li a").each(function() {
      // Compare the text of <a> with the search term
      if ($(this).text().toUpperCase().indexOf(search) > -1) {
        // Append matching value to be displayed under results
        uls += "<li><a href='#'>" + $(this).text() + "</a></li>";
      }
    });
    uls += "</ul>";
    // Add the list to the designated 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 be displayed here -->
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The event.currentTarget's attempt to toggle the class of the child element is not functioning as

I am having trouble toggling a class of a child element of the target element. I can't seem to get it to work and I'm unsure of what steps to take next. HTML: <div class="post-footer-icons-container-el" data-btntype="comment&qu ...

Ensuring that a nested div adjusts responsively within a static parent container

I am working on a project that involves HTML, CSS, and JS code. Here is the structure of my code: HTML: <div id="blockcart-wrapper"> <div class="blockcart cart-preview"> <div class="header"> <a rel="nofollow" href="#"> ...

Color overlay on top of image background

I'm struggling to create a striped colored background with a narrow center single color background on top for showcasing articles and photos. However, I am unable to get the colored background to display correctly. Despite trying different approaches ...

Having trouble figuring out how to load images into a div based on the current page location?

Looking for a solution to my problem - I have a navigation bar with a fixed div (A) on the far right side. The nav bar remains at the top of the page. There are 6 sections in the body of the page, each being 1200px tall divs. What I want is for a different ...

Engaging with a remotely loaded HTML in a JQUERY UI Dialog

My Experience with JQuery UI Plugin For a while now, I've been utilizing the JQuery UI plugin to create dynamic dialog boxes that load content on the go. Imagine this scenario: I load an HTML document that showcases various selectable items with che ...

retrieve the JavaScript file from the blob storage

I am attempting to load a javascript file from Azure Blob Storage using jQuery, but I'm having trouble getting it to work. I've tried using $.get, $.getScript, and regular $.ajax methods without success. Can someone guide me on the correct approa ...

Alternative techniques apart from submitting

Within my PHP submit form, I have integrated a PHP image gallery that pulls images from a specific folder (with a dropdown to select images from different folders). When I click on an image in the gallery, the path to that image is automatically entered i ...

I am unable to activate Wicket's onchange event

I've been trying to automate the population of three dropdown selection elements using a Chrome extension. I'm able to change the value of the first dropdown, but it doesn't trigger the necessary action that populates the second and third dr ...

Prevent the utilization of <span> tags for line breaks to

When resizing my window to a smaller size, I encountered some unsightly spans that cut into new lines. To demonstrate this issue, I intentionally set the width:20px;. Can this problem be avoided? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/ ...

Adjusting the "width" of a widgets within a particular <td> element on WordPress

Recently, I was given the task of modifying a mortgage calculator widget on a WordPress site to enlarge its appearance. Specifically, I am attempting to adjust the #MLCalcFormLoanForm table tbody tr td where one of the individual tags is set with a width ...

Error handling ajax and php in the submitHandler of $.validate

I encountered an issue with my double form utilizing jQuery Validate. Whenever the ajax call is supposed to execute, I receive an error message: $.validate.submitHandrer in main.js. Here is a snippet of my code: 'use strict'; // Code goes here ...

Utilizing the power of bootstrap-sass in combination with Ionic 2

I attempted to incorporate some of Bootstrap's mixins into Ionic 2 but encountered an error related to incompatible units that I am struggling to resolve. node_modules\bootstrap-sass\assets\stylesheets\bootstrap\_variables.sc ...

Issue with jQuery draggable helper on Chrome causing glitches

I have exhausted all my knowledge trying to solve this issue, yet I have had no success. My website functions perfectly in IE and FF, but in Chrome, there is a strange glitch that persists without any clear cause. The problem arises when dealing with two ...

Having trouble with Laravel API and jQuery - Receiving empty response while using response()->json method

Recently, I encountered an unusual behavior of jQuery when interacting with a Laravel API backend. This isn't the typical authentication issue that usually arises. Here are two scenarios: Scenario 1: No output with jQuery public function index(Reque ...

Tips on inserting a button within a select element using jQuery

Can anyone help me with adding a button alongside the select options? I want to repeat the button and option format like this. I have been unsuccessful in my attempts so far. Any assistance would be greatly appreciated. <!DOCTYPE html> <html la ...

Leverage the power of jQuery and AJAX in conjunction with the Laravel framework to showcase and

I am currently working on a page that showcases various products. Initially, I had set up a route as follows: Route::get('products/{category}/{subcategory}') In my controller, I was returning results from the database to display the items. Howe ...

The current functionality of my web scraping code is operational; however, I am looking to enhance its specificity. Is it possible for me to designate which data to scrape by specifying the particular header above it

My current code is working perfectly, extracting all the <li> elements from a specific div. from scrapy.spider import BaseSpider from project.items import QualificationItem from scrapy.selector import HtmlXPathSelector from scrapy.http.request impor ...

Adjust the color of scrollspy links as you scroll

Check out this example code snippet at http://jsbin.com/huhavejipepi/2/edit?html,js. I'm looking to update the color of the links in the top fixed navbar. When the user is at the top of the page, all the links should be black. As they scroll down, onl ...

Develop dynamic and stylized CSS using PHP within the Laravel framework

I am experiencing an issue with creating CSS files in Laravel within my controller. When I try to return the result, it shows up as a normal text file instead of a CSS file. In my routes.php file, I have: Route::get('/css/{css}.css', 'File ...

Error in the syntax of PHP code within an external .js file

Despite my best efforts, I have been unable to find a solution to my current problem. I am attempting to insert a PHP variable into my external .js file. The goal is to store the PHP variable in a JavaScript variable and then use ajax for database communi ...