Friday, May 10, 2024
 Popular · Latest · Hot · Upcoming
14
rated 0 times [  19] [ 5]  / answers: 1 / hits: 6037  / 3 Years ago, thu, june 3, 2021, 12:00:00

I'm trying to search for supplier from the database using the bootstrap-select picker on the dropdown. What I want is while typing in a letter, the dropdown shows the relevant name from the database. The problem is, when I click the search bar, it doesn't show me the list of suppliers in the dropdown. what went wrong? I was able to see the list of suppliers in the dropdown before adding in the data-live-search and the select picker class.


      <script>
$(document).ready(function(){
$('.search select').selectpicker();
})
</script>

<?php
//display supplier list on form

$supplier="SELECT * FROM supplier";
$sup_run=mysqli_query($conn,$supplier);

if(mysqli_num_rows($sup_run)> 0)
{
?>
<div class="form-group search" >
<label> Supplier Name</label>
<select class="selectpicker" data-live-search="true">

<option value=""> Choose a Supplier Company</option>
<?php
foreach($sup_run as $row)
{
?>
<option value="<?php echo $row['sup_id'];?>"><?php echo $row['sup_name'];?></option>
<?php
}
?>
</select>
</div>
<?php
}
else{

echo "No Data Available";
}
?>

More From » php

 Answers
8

Since you haven't provided any of your other code, I would assume you are properly including all required files - jquery, boostrap js and css. I would also assume your php code works and generates the required html. That being said, please examine the below snippet. I reproduced your error and examined the source code - it had all items in the DOM but was not showing any of them. According to the documentation the size parameter determines how may items are shown:


When set to false, the menu will always show all items.

Setting size: false seems to have resolved the issue.




$(document).ready(function(){
$('.search select').selectpicker({
size: false
});
})

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css');

<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.3/umd/popper.min.js integrity=sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 crossorigin=anonymous></script>
<script src=https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js integrity=sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js></script>


<div class=form-group search >
<label> Supplier Name</label>
<select class=selectpicker data-live-search=true>

<option value=> Choose a Supplier Company</option>

<option value=1>Supplier Name</option>
<option value=2>Feil, Hills and Wunsch</option>
<option value=3>Sanford - Gutmann</option>
<option value=4>Quigley and Sons</option>
<option value=5>Kuhic - Streich</option>
<option value=6>Heaney Group</option>
<option value=7>Legros, O'Connell and Robel</option>
<option value=8>Kreiger Group</option>
<option value=9>Jakubowski, Pouros and Dooley</option>
<option value=10>Block - Legros</option>
<option value=11>Ernser - Bode</option>
<option value=12>Tillman - Champlin</option>
<option value=13>Nader - Rice</option>
<option value=14>Brekke Inc</option>
<option value=15>Buckridge - Rohan</option>
<option value=16>Wiza, Walsh and Zemlak</option>
<option value=17>Bogan and Sons</option>
<option value=18>Harvey - Reichert</option>
<option value=19>Hintz - Kunze</option>
<option value=20>Rodriguez - Mayer</option>
<option value=21>Beahan - Daugherty</option>
</select>
</div>




[#1279] Friday, May 28, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
amari

Total Points: 736
Total Questions: 111
Total Answers: 90

Location: Saint Pierre and Miquelon
Member since Fri, Jan 28, 2022
2 Years ago
;