Ajax oder OnClick() laden ⇐ Jquery

[Anonymous]

Ich versuche herauszufinden, wie ich am besten einige Ergebnisse basierend auf dem Klick des Benutzers laden kann, ohne eine neue Seite zu laden.
Zunächst konnte ich selbst eine Ajax-Suchfunktion auf der linken Seite der Seite implementieren.
Was ich jetzt tun möchte, ist, einige Details basierend darauf, was der Benutzer klickt, auf der rechten Seite der Seite zu laden. Dadurch werden Details zu den Lebensmitteln angezeigt, die sie in ihrer Suche ausgewählt haben.
Soll ich dafür erneut Ajax oder jQuery verwenden? Kann mir bitte jemand zeigen, wie das geht? Ich möchte in der Lage sein, die ID zu übergeben, die Sie in den HTML-Suchergebnissen auf meiner Website sehen können, und sie zu laden, wenn darauf geklickt wird.
Hier ist ein Beispiel für ein zurückgegebenes Ergebnis einer Suche, auf das ein Benutzer klicken kann. Die Klasse ist die Artikel-ID

Code: Select all

APPLE JUC,CND OR BTLD,UNSWTND,W/ ADDED VIT C

Hier ist meine Website, die Sie sich ansehen können, um zu sehen, was ich meine.

Code: Select all

http://challengeyourdiet.com/dev/usda/

Hier ist der relevante Code, an dem ich gerade arbeite.
Ajax

Code: Select all

$(document).ready(function() {
function ajax_delay(str){
setTimeout("str",2000);
}
$("#faq_search_input").watermark("Begin Typing to Search");
$("#faq_search_input").keyup(function()
{
var faq_search_input = $(this).val();
var dataString = 'keyword='+ faq_search_input;
if(faq_search_input.length>2)
{
$.ajax({
type: "GET",
url: "ajax-search.php",
data: dataString,
beforeSend:  function() {
$('input#faq_search_input').addClass('loading');
},
success: function(server_response)
{
window.setTimeout(function() {
$('#searchresultdata').html(server_response).show();
$('span#faq_category_title').html(faq_search_input);
if ($('input#faq_search_input').hasClass("loading")) {
$("input#faq_search_input").removeClass("loading");
}
}, 1200);
}
});
}return false;
});
});

HTML

Code: Select all

 


[h4] [b]Food Details For : [/b] Keyword  [/h4]