I tried to use the script from you tube:https://www.youtube.com/watch?v=YqMtE8UO-xw My auto suggest list is freezing the chrome now it worked before not sure why chrome is freezing now. I have the below query:
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchquery").keyup(function(){
$.get("suggest.php", {searchquery: $(this).val()}, function(data){
$("datalist").empty();
$("datalist").html(data);}); }); });</script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchquery2").keyup(function(){
$.get("suggest1.php", {searchquery2: $(this).val()}, function(data){
$("datalist").empty();
$("datalist").html(data); }); });});</script>
& I have the following input:
<th width="170" scope="col"><input type="text" size="25" name="searchquery2" id="searchquery2" placeholder="Business Type" list="datalist1"/><datalist id="datalist1" /> </datalist> </th> <th width="170" scope="col"><input type="text" list="myCompanies" size="25" name="searchquery" id="searchquery" placeholder="Suburb, City, or Postcode"/><datalist id="myCompanies" /> </datalist></th>
Send many ajax request can make browser freeze I suggest you make a timeout for request and just send last value to server. timeout wait if user doesn't type anything then send request. I also suggest to use input
event instead of keyup
. your code should looks like this:
$(document).ready(function() {
$("#searchquery").on('input', function() {
clearTimeout(window.t1);
window.t1 = setTimeout(function() {
$.get("suggest.php", {
searchquery: $(this).val()
}, function(data) {
$("datalist").empty();
$("datalist").html(data);
});
}, 1000);
});
$("#searchquery2").on('input', function() {
clearTimeout(window.t2);
window.t2 = setTimeout(function() {
$.get("suggest1.php", {
searchquery2: $(this).val()
}, function(data) {
$("datalist").empty();
$("datalist").html(data);
});
}, 1000);
});
});