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

Posted 2023-02-22

【中文标题】从 Bootstrap typeahead 和 JSON 制作可点击的结果列表

【英文标题】：Making clickable result list from Bootstrap typeahead and JSON

【发布时间】：2017-05-22 17:42:00

【问题描述】：

我想让我的 Bootstrap 预输入列表的结果列表可点击，如果用户点击下拉列表中的任何项目，它将被重定向到所选项目的 url [在我的网站上，而不是外部链接] .我对此 *** 主题进行了更改：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);

?>

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

非常感谢！

【参考方案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;
    
  );
);
);