3

I have one bootstrap drop down with search text box in my web page. I am adding dynamic data into that drop down, but they are large and come from a database. That why it takes long to load. Does anyone know the solution for this problem?

<select data-live-search="true" name="paymentfacility" id="paymentfacility" data-live-search-style="startsWith" class="selectpicker">
    <?php 
    foreach($facilitiesall as $val)
    {?>
        <option value="<?php echo $val['Facility']['id']; ?>"> 
           <?php echo $val['Facility']['name']; ?>
        </option>
    <?php } ?>
</select>
Dipak Bhosale
  • 51
  • 8

1 Answers1

0

If you don't mind to change select field into an input text field, I use this script: it's an autocomplete library that create a list just below the input field. It calls a php file searching what I'm looking for, so you don't load all DB..

https://github.com/jhonis/bootcomplete

JS

$('#inputText').bootcomplete({
   url: 'search.php',
   method: 'post',
   minLength: 2
});

PHP

$txt = $_POST['query'];

$helper = new PDO(CONNECTION_DNS, CONNECTION_USER, CONNECTION_PWD);
$helper->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// YOU MUST HAVE id AND label AS RETURN DATA
$stmt = $helper->prepare('SELECT P.Id as id, P.Code as label FROM TABLE_NAME WHERE Code LIKE :Query');
$stmt->bindValue(':Query', '%'.$txt.'%', PDO::PARAM_STR);
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

print json_encode($results);
Giacomo Scarpino
  • 599
  • 3
  • 17
  • select box do not have any solution?? – Dipak Bhosale May 24 '18 at 09:25
  • No.. What about load part of the list and listen to the select drop down menu scroll, as soon as you reach (let's say) the 40th option you load more with jquery and append the new options in the list.. Quite sure you can do it. Take a look at this https://jsfiddle.net/j68o44Ld/ – Giacomo Scarpino May 24 '18 at 17:25