Ein anklickbares Suchergebnis aus einer JSON-Tabelle erstellen

Question

Ich habe eine Schlüssel-Suchfunktion mit HTML, AJAX und JSON erstellt, und das funktioniert gut, es zieht Ergebnisse aus der JSON-Tabelle und zeigt sie an.

Ich brauche jedoch einen Benutzer, um auf das Suchergebnis klicken und zu dieser relevanten Seite fortfahren zu können. Um genauer zu sein, mache ich eine E-Commerce-Seite, die Suche bringt Produkte zum Verkauf zurück. Also brauche ich einen Benutzer, um in das Produkt zum Verkauf klicken zu können. Die html ist unten:

 <div id="searcharea"> 
    <label for="search"><a href="#"><img src="images/search.jpg"></a></label> 
<input type="search" name="search" id="search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}" /> 


       </div> 
       <div id="update"></div> 

neben der Code-Skript ist:

<script> 
$('#search').keyup(function(){ 
    var searchField = $('#search').val(); 
    var myExp = new RegExp(searchField, 'i'); 
    $.getJSON('searchshop.json', function(data){ 
    var output = '<ul href class="searchresult">'; 
    $.each(data, function(key, val){ 
     if((val.brand.search(myExp) != -1) || (val.type.search(myExp) != -1)) { 
      output +='<h1>' + val.brand + '</h1>'; 
      output +='<h2>' + val.product + '</h2>'; 
      output +='<img src="images/' + val.imageref +'" />'; 
      output +='<p>' + val.price + '</p>'; 

     } 
    }); 
     output += '</ul>'; 
     $('#update').html(output); 
    }); 
}); 
</script>      

jemand bitte helfen!

Answer 1

Da Sie bereits Code haben, der das Produkt anzeigt, können Sie es nur ändern, so dass die Anzeige durch eine <a> Tag enthalten ist, und stellen Sie die href auf der entsprechenden Seite (ich könnte mir vorstellen, diesen Teil Ihrer Datenbank ist, oder kann programmgesteuert generiert werden).

Answer 2

In Ihrem Skript können Sie einige Markups hinzufügen, um Links zu generieren, oder den "item" -Behälter klickbar machen.

Beispiel machen Produktnamen klickbare

$.each(data, function(key, val){ 
    if((val.brand.search(myExp) != -1) || (val.type.search(myExp) != -1)) { 
     output +='<h1>' + val.brand + '</h1>'; 
     output +='<h2><a href=\"link-to-product\" >' + val.product + '</a></h2>'; 
     output +='<img src="images/' + val.imageref +'" />'; 
     output +='<p>' + val.price + '</p>'; 

    } 
});