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

Question

我想让我的 Bootstrap 预输入列表的结果列表可以点击，如果用户点击下拉列表中的任何项目，它将被重定向到所选项目的 url [在我的网站上，而不是外部链接] .我对这个 Stackoverflow 主题进行了更改:jquery autocomplete json and clickable link through

问题是，我不喜欢 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 代码:

<?php

require_once('../config/config.php');
require_once('../functions/functions.php');
require_once('../config/db_connect.php');

$query = 'SELECT name_desc FROM tbl_name ';

if(isset($_POST['query'])){
  $query .= ' WHERE LOWER(name_desc) LIKE LOWER("%'.$_POST['query'].'%")';
}

$return = array();

if($result = mysqli_query($conn, $query)){
  // fetch object array
  while($row = mysqli_fetch_row($result)) {
    $array = array("name" => $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;
    }
  });
});
});