从Bootstrap typeahead和JSON制作可点击的结果列表

我想让我的Bootstrap预先输入列表的结果列表可单击，如果用户点击下拉列表中的任何项目，它将被重定向到所选项目的[在我的网站上，而不是外部链接]的URL。 我对此Stackoverflow主题进行了更改： jquery autocomplete json和可点击链接

问题是，我没有进入JS和Jquery，我不知道为什么我会收到此错误（Firefox Firebug控制台输出）。 每次我在输入文本框中输入任何字母时都会收到此错误：

TypeError: it.toLowerCase is not a function bootstrap3-typeahead.min.js (1. line, 3920. column) 

我看到我的PHP结果似乎没问题，所以它必须是jQuery语句中的东西……

这是我的PHP结果：

 [{"name":"TEXT-ONE","url":"\/textone-postfix"},{"name":"TEXT-TWO","url":"\/texttwo-postfix"},{"name":"TEXT-THREE" ,"url":"\/textthree-postfix"}] 

这是我的JQuery代码：

 $(document).ready(function() { $(function() { $('#namesearch').typeahead({ source: function(request, response) { $.ajax({ url: '/functions/search-autocomplete.php', type: 'POST', dataType: 'JSON', data: 'query=' + request, success: function(data) { response($.map(data, function(item) { return { url: item.url, value: item.name } })) } }) }, select: function( event, ui ) { window.location.href = ui.item.url; } }); }); }); 

这是我的PHP代码：

  $row[0], "url" => "/" . normalize_name($row[0])."-some-url-postfix"); $return[] = $array; } // free result set $result->close(); } // close connection $conn->close(); $json = json_encode($return); print_r($json); ?> 

有人可以帮我解决这里可能出现的问题吗？

非常感谢你！

Answer 1

问题是没有定义displayText：

 $(document).ready(function() { $(function() { $('#namesearch').typeahead({ source: function(request, response) { $.ajax({ url: '/functions/search-autocomplete.php', type: 'POST', dataType: 'JSON', data: 'query=' + request, success: function(data) { response($.map(data, function(item) { return { url: item.url, value: item.name } })) } }) }, displayText: function(item) { return item.value }, select: function( event, ui ) { window.location.href = ui.item.url; } }); }); });