Hey Freunde!
Ich habe mir die AJAX-Suche mit Suchvorschlägen aus dem tpl_modified stibitzt und in mein Template eingebaut, doch leider funktioniert diese nicht immer.
Problem (wie ich es derzeit vermute):
Größere Chunks aus aus der autocomplete.php kommen später an und überschreiben die kleineren, konkreteren Suchvorschläge.
Beispiel: Sagen wir, ich verkaufe Hemden. Gebe ich "Hemd grün" ein, so sehe ich kurz die paar grünen Hemden in den Suchvorschlägen und da machts gefühlt *plöp* und ich sehe die Suchvorschläge mit allen Hemden.
Lösungsversuch:Da ich davon ausgehe, dass größere Pakete in der asynchronen Übertragung später ankommen und die neuen Überschreiben (was ja bekanntlich ein Problem sein kann), so hab ich $.post in der Funktion "ac_lookup" in AJAX geändert:
$.ajax({
type: 'POST',
url: "<?php echo xtc_href_link('api/autocomplete/autocomplete.php'); ?>",
data: {queryString: ""+inputString+""},
success: function(data) {
if(data.length > 0) {
$('#suggestions').slideDown();
$('#autoSuggestionsList').html(data);
ac_showPage(1);
$('#autocomplete_prev').click(ac_prevPage);
$('#autocomplete_next').click(ac_nextPage);
}
},
async:true
});
(Datei: template/javascript/general_bottom.js.php)
...was exakt das gleiche Ergebnis bot. Also habe ich "async" mal auf "false" gesetzt und ja, den Warnungen entsprechend war es laangsam, bot zwar bei wenigen Zeichen das gewünschte Ergebnis, wurde dann aber vom Browser geblockt (deprecated function).
Nach etwas Recherche habe ich gelesen, dass einige eine ID oder Dergleichen nutzen, um das übermittelte Paket (hier die Suchvorschläge aus der autocomplete.php) zu verifizieren und nur das korrekte Suchergebnis zu nutzen. Also hab ich folgendes gemacht:
1. Diese Funktion zur Generierung eines Hashes genommen und eingebaut: function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 20; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
2. Diesen Hash in die ac_lookup eingebautfunction ac_lookup(inputString) {
if(inputString.length == 0) {
$('#suggestions').hide();
} else {
var requestHash = makeid();
$('input#inputString').addClass('ac_loading'); // Loading-Gif
$.post("<?php echo xtc_href_link('api/autocomplete/autocomplete.php'); ?>", {queryString: ""+inputString+"", requestHash: ""+requestHash+""}, function(data) {
if(data.length > 0) {
$('#suggestions').slideDown();
if (data.search(requestHash) != -1) {
console.log("hash found "+requestHash);
$('#autoSuggestionsList').html(data);
} else {
console.log("hash not found"+requestHash);
}
ac_showPage(1);
$('#autocomplete_prev').click(ac_prevPage);
$('#autocomplete_next').click(ac_nextPage);
}
});
}
$(document).ajaxComplete(function () {
$('input#inputString').removeClass('ac_loading'); // Loading-Gif
});
}
function ac_closing() {
setTimeout("$('#suggestions').slideUp();", 100);
ac_page = 1;
}
Hier wird der Hash als Post-Parameter übergeben.
3. In der autocomplete wird der Hash einer Smarty-Variable zugewiesen if (isset($_POST['requestHash'])) { $module_smarty->assign('requestHash', $_POST['requestHash']); } 4. ...und im Modul "module/autocomplete.html" der Liste als verstecktes Listenelement vorangestellt <li style="display: none;">
{$requestHash}
</li>
Nun plöppen aber immer noch die Suchvorschläge für
alle Hemden auf, nachdem kurz die Liste mit den wenigen grünen Hemden zu sehen war und wenn ich es in der Konsole loggen lasse, dann steht da sogar das richtige Hash!?!?
Kann es sein, dass ich bzgl. "asynchron" auf dem falschen Pfad bin? Hab ich 'nen Fisch auf den Augen?
Linkback: https://www.modified-shop.org/forum/index.php?topic=37361.0