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

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" >
                <?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>

CodePudding user response：

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 >
  <button onclick="myFunction()" >Dropdown</button>
  <div id="myDropdown" >
    <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>

CodePudding user response：

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