Question

我从Bootstrap's typeahead下载的https://github.com/twitter/typeahead.js/挣扎了3-4个小时我尝试添加带有typeahead建议的点击功能，以使用javascript＆＃39; s window.location.href更改页面。我的typeahaed适用于json值

// Typeahead
$("#search-product").typeahead({
    ajax: {
        url: "_inc/search-json.php?product=",
        timeout: 500,
        displayField: "product_name",
        triggerLength: 3,
        method: "get",
        preDispatch: function (query) {
            return {
                search: query
            }
        },
    }
});

建议ul建议附带2个值; 1）产品名称，2）产品ID。示例html结构;

<ul class="typeahead dropdown-menu">
    <li data-value="166" class=""><a href="#"><strong>TK03</strong>0</a></li>
    <li data-value="167"><a href="#"><strong>TK03</strong>1</a></li>
</ul>

我尝试将点击功能添加到li，将用户重定向到包含jquery代码的产品详情页面;

var productId = $('.typeahead li').data("value");
$(".typeahead").on( "click", "li", function() {
    window.location.href = "/product-details.php?i=" + productId;
});

但它总是重定向到：product-details.php?i=undefined 我的代码出了什么问题，我错过了什么？

Answer 1

var productId = $('.typeahead li').data("value"); // Doesnt make any sense outside the click callback. Instead write it within the callback like shown below.

您需要在click回调中获取产品ID：

$(".typeahead").on( "click", "li", function() {
   var productId = $(this).data("value");  // $(this) refers to the clicked li
   window.location.href = "/product-details.php?i=" + productId;
});

Bootstrap typeahead建议链接与jquery点击不起作用

1 个答案: