从Bootstrap typeahead和JSON创建可点击的结果列表 [英] Making clickable result list from Bootstrap typeahead and JSON

问题描述

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

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

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

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)

我看到我PHP的结果似乎没关系，所以它必须是jQuery语句中的东西......

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

这是我的PHP结果：

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

这是我的JQuery代码：

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

这是我的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);

?>

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

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

非常感谢！

推荐答案

问题在于displayText未定义：

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

这篇关于从Bootstrap typeahead和JSON创建可点击的结果列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！