How do I create a dropdown menu with a search for MySQL database

Question

I want to create a select box with a search option just like this but the option is from my database.

The code I have so far

<form name="form1" action="" method="post">                            
<table>
    <tr>                                    
        <td>
            <select name="id" class="form-control selectpicker">
                <?php
                $res=mysqli_query ($link,"select id, nama from peminjaman");
                while ($row = mysqli_fetch_array($res)) 
                {
                    echo "<option>";
                    echo $row["id"].". " .$row["nama"];
                    echo "</option>";
                }
                ?>
            </select>
        </td>

You have to use `AJAX` request for this kind of situation. take a look at [this](https://www.cloudways.com/blog/live-search-php-mysql-ajax/) that can be helpful. — sajjad rezaei, Feb 26 '22 at 14:43

score 1 · Answer 1 · edited Feb 26 '22 at 17:43

try this.

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

score 0 · Accepted Answer · answered Feb 26 '22 at 20:57

The way you are doing it assume you have a lot of data in the database and you want to load them every time you load the page. That is going to slow down everything. You should go for an AJAX way of working. And also it is already done with select2 jquery plugin. Here is the link for that.

https://select2.org/data-sources/ajax

Already many things are done in the api. You just have to encode the data into JSON. Actually it is better if you start from here.

https://select2.org/data-sources

How do I create a dropdown menu with a search for MySQL database

2 Answers2