从 JSON 表创建可点击的搜索结果答案

【问题标题】：Creating a clickable search result from a JSON table从 JSON 表创建可点击的搜索结果
【发布时间】：2016-04-14 21:13:50
【问题描述】：

我已经使用 html、ajax 和 JSON 创建了一个键搜索功能，它工作正常，它从 JSON 表中提取结果并显示它们。

但是，我需要用户能够点击搜索结果并继续访问该相关页面。更具体地说，我正在制作一个电子商务页面，搜索带回待售产品。所以我需要一个用户能够点击进入待售产品。 html如下：

<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>

接下来是脚本代码：

<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>

请有人帮忙！

【问题讨论】：

标签： javascript php jquery json ajax

【解决方案1】：

由于您已经有显示产品的代码，您可以更改它，以便显示由 <a> 标签包裹，并将 href 设置为相关页面（我想这是您的数据库，或者可以通过编程方式生成）。

【讨论】：

如果有意义，我需要它在我的网站内链接吗？当列出包含相应产品的搜索结果时，我需要能够点击这些产品吗？我还能做到吗，我很困惑，谢谢你的回复
是的，<a> 标签会使其可点击；请参阅@Flgor 的答案并将href 替换为您希望用户单击时去的位置。

【解决方案2】：

在您的脚本中，您可以添加一些标记来生成链接，或者使“项目”容器可点击。

使产品名称可点击的示例

$.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>';

    }
});

【讨论】：

感谢您的回复，我不确定如何将其链接到我网站中的产品？我不太擅长这个。