Javascript 引导带jquery的typeahead建议链接单击不工作

我从

https://github.com/twitter/typeahead.js/

我正在尝试添加一个带有typeahead建议的单击功能，以使用javascript的

window.location.href

更改页面。 我的typeahed可以很好地处理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>

但它总是重定向到：

product details.php？i=undefined

我的代码有什么问题，我遗漏了什么

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

您需要在

单击
回调中获取产品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;
});

var productId=$（this）.data（“值”）
您是否在
单击
回调
var-productId=$（'.typeahead li'）.data（“value”）中尝试过这个方法在您的单击处理程序之外对me@SandeepNayak成功了。非常感谢。把你的评论改为回答，我会接受的。
$(".typeahead").on( "click", "li", function() {
   var productId = $(this).data("value");  // $(this) refers to the clicked li
   window.location.href = "/product-details.php?i=" + productId;
});