Javascript 从JSON表创建可单击的搜索结果

我已经使用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>

$（“#搜索”）.keyup（函数（）{
var searchField=$（'#search'）.val（）；
var myExp=new RegExp（searchField，'i'）；
$.getJSON（'searchshop.json'，函数（数据）{
var输出='
；
$。每个（数据、函数（键、值）{
if（（val.brand.search（myExp）！=-1）| |（val.type.search（myExp）！=-1））{
输出+=''+val.brand+''；
输出+=''+val.product+''；
输出+=''；
输出+=''+val.price+'
'；
}
});
输出+='
'；
$（'#update'）.html（输出）；
});
}); 

---

有人请帮忙

因为您已经有了显示产品的代码，所以您只需更改它，使显示由

标记包装，并将

href

设置到相关页面（我可以想象这是数据库的一部分，或者可以通过编程生成）。

因为您已经有了显示产品的代码，您只需更改它，使显示由

标记包装，然后将

href

设置为相关页面（我可以想象这是数据库的一部分，或者可以通过编程生成）。

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

使产品名称可点击的示例

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

    }
});

$。每个（数据、函数（键、值）{
if（（val.brand.search（myExp）！=-1）| |（val.type.search（myExp）！=-1））{
输出+=''+val.brand+''；
输出+=''；
输出+=''；
输出+=''+val.price+'
'；
}
});

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

使产品名称可点击的示例

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

    }
});

$。每个（数据、函数（键、值）{
if（（val.brand.search（myExp）！=-1）| |（val.type.search（myExp）！=-1））{
输出+=''+val.brand+''；
输出+=''；
输出+=''；
输出+=''+val.price+'
'；
}
});

如果有意义，我需要它在我的网站内链接？当搜索结果与适当的产品列出，我需要能够点击这些产品？我还可以这样做吗，我很困惑，谢谢你的回答是的，

标签会让它可以点击；请参阅@Flgor的答案，并将

href

替换为您希望用户在单击时所处的位置。如果有意义，我需要它在我的网站内链接？当搜索结果与适当的产品列出，我需要能够点击这些产品？我还可以这样做吗，我很困惑，谢谢你的回答是的，

标签会让它可以点击；请参阅@Flgor的答案，并将

href

替换为您希望用户在单击时所处的位置。感谢您的回复，我不知道如何将其链接到我网站中的产品？我不太擅长这个。谢谢你的回复，我不知道如何把它链接到我网站上的产品上？我不太擅长这个。