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

Question

I want to make the result list for my Bootstrap typeahead list clickable and if the user clicks on any of the items in the dropdown list it will be redirected to the url [on my site, not external links] of the selected item. I made my changes regarding this Stackoverflow topic: jquery autocomplete json and clickable link through

The problem is, that I'm not into JS and Jquery and I can't tell why I get this error (Firefox Firebug Console output). I get this error everytime I enter any letter in my input textbox:

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

I see that the results of my PHP seems okay, so it must be something in the jQuery statement...

This is my result from the PHP:

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

This is my JQuery code:

$(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;
    }
  });
});
});

This is my PHP code:

<?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);

?>

Can someone please help me what could be the problem here?

Thank you very much!

Answer 1

The problem was that the displayText wasn't defined:

$(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;
    }
  });
});
});