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

【问题标题】：Making clickable result list from Bootstrap typeahead and JSON从 Bootstrap typeahead 和 JSON 制作可点击的结果列表
【发布时间】：2017-05-22 17:42:00
【问题描述】：

我想让我的 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);

?>

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

非常感谢！

【问题讨论】：

标签： javascript php jquery json twitter-bootstrap

【解决方案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;
    }
  });
});
});

【讨论】：