Question

我想让我的Bootstrap预先输入列表的结果列表可以点击，如果用户点击下拉列表中的任何项目，它将被重定向到所选项目的[我的网站上的网址，而不是外部链接] 。我对此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;
    }
  });
});
});

从Bootstrap typeahead和JSON创建可点击的结果列表

1 个答案: