Καθυστέρηση αποτελεσμάτων από mysql

[killer76]

Καλησπέρα. Έχω ένα πεδίο αναζήτησης και θέλω να εμφανίζω κάποια αποτελέσματα από την βάση. Το πρόβλημα είναι οτι έχω κάποιες καθυστερήσεις, δηλαδή έστω οτί έχουμε ένα site με αυτοκίνητα. Και βάζω να ψάχνει το keyword σε μάρκες και μοντέλα. Έχω βάλει να κάνει αναζήτηση όταν κάποιος πληκτρολογήσει πάνω από 3 χαρακτήρες.

παράδειγμα.

Αρχίζει και πληκτρολογεί κάποιος Cit (εδώ του βγάζει νορμάλ τα αποτελέσματα με τα citroen) αν συνεχίσει Citr (εδώ μπορεί να μην βγάλει τίποτα, και μετά απο 2-3 δευτερόλεπτα να εμφανίσει τα Citroen. Αν μετά σβήσω γρήγορα την μπάρα της αναζήτησης, ενω κανονικά θα έπρεπε να εξαφανιστούν όλα τα αποτελέσματα (γίνεται μερικές φορές), το πιο πιθανό είναι να εμφανίσει όλα τα αυτοκίνητα.

Το Html μου είναι:
 

<div class="container" id="searchnav">
	<input type="text"  id="search" value="" class="form-control  autocomplete="off"  />
	<div class="resultDiv"></div>
</div>
<div class="clearfix"></div>

Το JS μου είναι:

$(document).ready(function() {
    $("#search").keyup(function() {
        $(".resultDiv").html("").hide();
        var keywords = $(this).val();
        if(keywords != "" && keywords.length > 2) {
            clearTimeout(timer);
            timer = setTimeout(function(){
            $.ajax({
                url: "<?php echo base_url();?>controllers/search_cars,
                data: {keywords : keywords},
                type: "POST",
                success: function(resp) {
                    if(resp != "") {
                        $(".resultDiv").html(resp).show();
                        console.log(resp);
                    } else {
                        $(".resultDiv").html("").hide();
                    }
                }
            });

  }, 300);    
            
        } else {
            $(".resultDiv").html("").hide();
        }
    });
    
$(document).click(function() {
        $("#search").val("");
        $(".resultDiv").html("").hide();                   
    });
});

Και ο controller μου είναι:

$keyword = $_POST['keywords'];
    
    if($this->controllers_model->get_car_model($keyword))
    {
        $data['cars'] = $this->controllers_model->get_car_model($keyword);
        
        echo '<table class="table table-borderless">';
        
        foreach($data['cars'] as $car){
        echo'
        <div id="mydiv">
        <a href="" class="text-muted"><div class="media">
                <img src="'.base_url().'assets/car_images/90w-'.$car->Photo.'" class="align-self-center mr-3" style="width:90px">
                <div class="media-body">
                    <h6>'.$car->Brand.' - '.$car->Model.'</h6>
                </div>
                </div></a></div>';    
        }
        echo '</table>';
    } else {
        echo "No Car Found";   
    }    

Γενικά βλέπω μια δυσλειτουργία. Άλλες φορές αργεί πολύ να εμφανίσει αποτελέσματα όταν σβήνω το πεδίο,μπορεί να εμφανίσει τα πάντα κλπ.

Δοκίμασα και χωρίς Timer. Τα ίδια.

Επεξ/σία 1 Δεκεμβρίου 2019 από killer76

[Predatorkill]

Για αρχη βαλε debouncer μαζι με το 3 char limit που εχεις και ξηλωσε εντελως τα timeouts:

http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/
 

Η βαση εχει σωστα indexes;

20 λεπτά πριν, killer76 είπε

ενω κανονικά θα έπρεπε να εξαφανιστούν όλα τα αποτελέσματα (γίνεται μερικές φορές), το πιο πιθανό είναι να εμφανίσει όλα τα αυτοκίνητα.

Με τον debouncer 99.9% θα λυθει αυτο. Να του δωσεις 500-600ms.

Καλο θα ηταν να βαλεις και pagination, πχ να δωσεις ενα limit 20 και οσο σκρολαρει ο χρηστης το πινακα να κανεις skip 20 λιγο πριν φτασει στο τελος (infinite scroll), αυτη η τεχνικη θα φερει πιο γρηγορα τα αποτελεσματα απο τη βαση.

Αν στο μελλον εχεις πολλα αυτοκινητα κοιτα προς elasticsearch, τα αποτελεσματα θα ερχονται σε κατω απο 1 sec.

Επεξ/σία 1 Δεκεμβρίου 2019 από Predatorkill

[killer76]

21 ώρες πριν, Predatorkill είπε

Για αρχη βαλε debouncer μαζι με το 3 char limit που εχεις και ξηλωσε εντελως τα timeouts:

http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/
 

Η βαση εχει σωστα indexes;

Με τον debouncer 99.9% θα λυθει αυτο. Να του δωσεις 500-600ms.

Καλο θα ηταν να βαλεις και pagination, πχ να δωσεις ενα limit 20 και οσο σκρολαρει ο χρηστης το πινακα να κανεις skip 20 λιγο πριν φτασει στο τελος (infinite scroll), αυτη η τεχνικη θα φερει πιο γρηγορα τα αποτελεσματα απο τη βαση.

Αν στο μελλον εχεις πολλα αυτοκινητα κοιτα προς elasticsearch, τα αποτελεσματα θα ερχονται σε κατω απο 1 sec.

Καλησπέρα φίλε μου. Έβαλα το debounce και ήδη μου φαίνεται οτί πάει καλύτερα. Απλά δεν είμαι σίγουρος άν το έβαλα σωστά. Εισήγαγα το script στο head για να το διαβάσει, και μετά το κομμάτι του js για την αναζήτηση το έκανα έτσι.

$(document).ready(function() {
    $("#search").keyup($.debounce(600,function(){
        $(".resultDiv").html("").hide();
        var keywords = $(this).val();
        if(keywords != "" && keywords.length > 2) {
            $.ajax({
                url: "<?php echo base_url();?>controllers/search_cars,
                data: {keywords : keywords},
                type: "POST",
                success: function(resp) {
                    if(resp != "") {
                        $(".resultDiv").html(resp).show();
                        console.log(resp);
                    } else {
                        $(".resultDiv").html("").hide();
                    }
                }
            });    
        } else {
            $(".resultDiv").html("").hide();
        }
    }));
    
$(document).click(function() {
        $("#search").val("");
        $(".resultDiv").html("").hide();                   
    });
});

Σωστά νομίζω είναι. ε?

Τα αυτοκίνητα τα είπα σαν παράδειγμα. Οι καταχωρήσεις αφορούν άλλο είδος που δύσκολα θα ξεπεράσουν τις 200. Αν θες μπορώ να σου στείλω πμ το url να δεις τι φτιάχνω, να μου πείς και την γνώμη σου.

 

 

[Predatorkill]

2 ώρες πριν, killer76 είπε

Καλησπέρα φίλε μου. Έβαλα το debounce και ήδη μου φαίνεται οτί πάει καλύτερα. Απλά δεν είμαι σίγουρος άν το έβαλα σωστά. Εισήγαγα το script στο head για να το διαβάσει, και μετά το κομμάτι του js για την αναζήτηση το έκανα έτσι.

$(document).ready(function() {
    $("#search").keyup($.debounce(600,function(){
        $(".resultDiv").html("").hide();
        var keywords = $(this).val();
        if(keywords != "" && keywords.length > 2) {
            $.ajax({
                url: "<?php echo base_url();?>controllers/search_cars,
                data: {keywords : keywords},
                type: "POST",
                success: function(resp) {
                    if(resp != "") {
                        $(".resultDiv").html(resp).show();
                        console.log(resp);
                    } else {
                        $(".resultDiv").html("").hide();
                    }
                }
            });    
        } else {
            $(".resultDiv").html("").hide();
        }
    }));
    
$(document).click(function() {
        $("#search").val("");
        $(".resultDiv").html("").hide();                   
    });
});

Σωστά νομίζω είναι. ε?

Τα αυτοκίνητα τα είπα σαν παράδειγμα. Οι καταχωρήσεις αφορούν άλλο είδος που δύσκολα θα ξεπεράσουν τις 200. Αν θες μπορώ να σου στείλω πμ το url να δεις τι φτιάχνω, να μου πείς και την γνώμη σου.

Κομπλε μου φαινεται.

 

Αυτο

keywords != "" && keywords.length > 2

μπορεις να το γραψεις ετσι:
 

 

keywords && keywords.length > 2

[killer76]

Τελικά με τα τεσταρίσματα που κάνω μέχρι στιγμής, μάλλον το πρόβλημα λύθηκε! Σε ευχαριστώ πολύ!

[Predatorkill]

Αυτο με τα timeouts θελει καλο διαβασμα για να καταλαβεις τι παιζει στο παρασκηνιο οσον αφορα τη σειρα που εκτελουνται αν π.χ ακυρωσεις τη μια (στη περιπτωση σου εκτελουνταν  οταν παταγες > 2 χαρακτηρες μετα αλλη μια οταν ησουν > 3 αλλα το πρωτο δεν ειχε τελειωσει)

Επεξ/σία 3 Δεκεμβρίου 2019 από Predatorkill