Question

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

有人请帮忙！

Answer 1

由于您已经拥有显示产品的代码，因此您只需更改它，以便显示内容包含<a>标记，并将href设置为相关页面（我会想到这一点）是数据库的一部分，或者可以通过编程方式生成。

Answer 2

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

使产品名称可点击的示例

{{1}}

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

2 个答案: