Reputation: 187
I am trying to speed up my select2 results as i have over six-thousand customers in the database. I have the input box filled with data from a mysql database and dont know what more I can try at this stage to be honest. here is my select2 javascript (Js just isnt my thing)
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script type="text/javascript">
$(function(){
// turn the element to select2 select style
$(".js-data-example-ajax").select2(
{
ajax: {
url: "/delete.php",
dataType: 'json',
data : function(term){
return{
term: term
};
},
results: function(data){
var results = <?php echo json_encode($jsData) ?>;
$.each(data, function(index, item){
results.push({
id: item.id,
text: item.fullName
})
})
}
}
});//end select2
});//end function
in php I use a foreach loop to read the data. It works perfect without the ajax just can be very slow select a result and there will be more customers added every day. I try to send back the id and the customers full name.
<?php
$sqlSearch="SELECT first_name, last_name, id, mobile, landline FROM customer order by first_name";
echo "<select id='tbCustId' class='js-data-example-ajax' style='width: 150px' size='2' name='tbCustId' required></option>";
// echo "<select>";
$jsData = [];
foreach ($db->query($sqlSearch) as $row){
$id = $row["Id"];
$fName = $row["first_name"];
$sName = $row["last_name"];
$fullName = $fName ." ". $sName;
$jsData[] = [
"id" => $id;
"fullName" => $fullName;
];
echo "<option value=$row[id]>
$fullName
</option>";
}
echo "</select><br/>";// Closing of list box
?>
Upvotes: 1
Views: 1207
Reputation: 176934
As there are too many records it taking too much time , to avoid suggestion is
Make use of Pagination or
Make use of parallel execution by firing multiple ajax request i.e. request one fetch 1 to 3000 data and parallel request fetch 3001 to 6000 data..
Example Code : might having syntax error
ajax: {
url: "/delete.php",
dataType: 'json',
data : function(term){
return{
term: term
//record no : 1 added parameter for paging
//record no : 3000
};
},
results: PushData
}
ajax: {
url: "/delete.php",
dataType: 'json',
data : function(term){
return{
term: term
//record no : 3001 added parameter for paging
//record no : 6000
};
},
results: PushData
}
function PushData(data){
var results = <?php echo json_encode($jsData) ?>;
$.each(data, function(index, item){
results.push({
id: item.id,
text: item.fullName
})
})
}
Upvotes: 3