如何从 php 获取输出到 typeahead？

Posted 2023-02-24

技术标签:

【中文标题】如何从 php 获取输出到 typeahead？【英文标题】：How to get output from php to typeahead? 【发布时间】：2015-07-19 00:55:15 【问题描述】：

我使用 twitter typeahead 和 php 作为从 mysql 获取数据的后端。但是当我开始在文本框中输入时，我看不到任何建议。我认为是因为 php 输出必须是 JSON 编码的..

如何编码输出

输出：

echo '<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"><img src='.$iurl.' class="icons" /><div class="results" style="color:#696969;text-decoration:none;">'."$fname".'</div><span style="color:#696969;text-decoration:none;" class="author">'.$caption.'</span></a>'."\n";

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Typeahead</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script  type="text/javascript" src="../js/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
    $('input.typeahead').typeahead(
        name: 'countries',
        prefetch: 'getvalues.php',
        limit: 10
    );
);  
</script>
<style type="text/css">
.bs-example
    font-family: sans-serif;
    position: relative;
    margin: 100px;

.typeahead, .tt-query, .tt-hint 
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 396px;

.typeahead 
    background-color: #FFFFFF;

.typeahead:focus 
    border: 2px solid #0097CF;

.tt-query 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;

.tt-hint 
    color: #999999;

.tt-dropdown-menu 
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;

.tt-suggestion 
    font-size: 24px;
    line-height: 24px;
    padding: 3px 20px;

.tt-suggestion.tt-is-under-cursor 
    background-color: #0097CF;
    color: #FFFFFF;

.tt-suggestion p 
    margin: 0;

</style>
</head>
<body>
    <div class="bs-example">
        <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
    </div>
</body>
</html>

getvalues.php

  <?php
require_once "config.php";
$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select file_name,img_url,captions from completer";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) 
    $fname = $rs['file_name'];
    $iurl = $rs ['img_url'];
    $caption = $rs ['captions'];
    echo '<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"><img src='.$iurl.' class="icons" /><div class="results" style="color:#696969;text-decoration:none;">'."$fname".'</div><span style="color:#696969;text-decoration:none;" class="author">'.$caption.'</span></a>'."\n";

?>

【问题讨论】：

提供的php代码是getvalues.php? 【参考方案1】：

您可能希望将您的预输入列表放入一个 json 文件中并将您的脚本更改为：

$(document).ready(function()
    $('input.typeahead').typeahead(
        name: 'countries',
        prefetch: 'location/getvalues.json',
        limit: 10
    );
);

json文件应该是：

["country1","country2","country3"]

【讨论】：

【参考方案2】：

首先，要将输出编码为 JSON，您必须使用结果构建一个数组并使用json_encode()，如下所示：

$return = array();
while($rs = mysql_fetch_array($rsd)) 
    $result[] = "...";

echo json_encode($result);

但默认情况下，结果在预先输入之前会被 html 转义，因此您不会得到预期的结果，但请查看建议列表中的 HTML 代码。要使用自定义 HTML 设计条目，您应该使用 here 中描述的模板。

您的 $result 数组条目可能如下所示，以提供您在 html 中的字段：

$result[] = array(
    "iurl" => "...",
    "fname" => "...",
    "caption" => "..."
);

...然后按照说明填写模板。

另一件事：prefetch 选项，您使用的不是 typeahead，而是 Bloodhound，通常与 typeahead 一起使用，但需要先初始化并作为 source 提供给 typeahead .看看here，很简单。

Bloodhound 可以将固定数据集作为数组（通过 local 选项），通过 URL 固定数据集（通过 prefetch 选项），或者可以对 URL 进行查询，这是您显然想要做的，当您在 PHP 代码中获取 $_GET["q"] 的值时。在这种情况下，您必须在 SQL 中使用 $q 并使用 remote 选项初始化 Bloodhound，如下所示：

remote: 
    url: 'getvalues.php?q=%QUERY',
    wildcard: '%QUERY'

您不需要这样做，因为它会在客户端再次被 typeahead.js 过滤……这只是性能和结果数量的问题。如果只有几个，请使用 Bloodhounds prefetch 选项。

【讨论】：

【参考方案3】：

首先，您应该使用mysqli 而不是mysql，而且您没有在查询中使用$_GET。不确定是否需要。

对于您的代码，不确定如何使用预取。我自己使用 Bloodhound，它也在官方 twitter typeahead github 上使用。它看起来像这样：

var countries= new Bloodhound(
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: 
        'cache': false,
        url: 'ajax/getvalues.php?q=%QUERY',
        wildcard: '%QUERY',
        filter: function (data) 
            return data;
        
    
);

countries.initialize();

这将通过 ajax 调用从您的服务器获取数据。您从您的 ajax 调用返回一个没有所有 html 标记的 JSON 到您的 typeahead。 html 标记可以在 typeahead 中完成

$('.typeahead').typeahead(
    highlight: true
, 
    name: 'countries',
    source: producten.ttAdapter(),
    displayKey: 'artikelNaam',
    templates: 
        suggestion: function (countries) 
            result='<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;">'+
                '<img src='+countries.img_url+' class="icons" />'
                '<div class="results" style="color:#696969;text-decoration:none;">'+
                    countries.file_name+
                '</div>'+
                '<span style="color:#696969;text-decoration:none;" class="author">'+
                    countries.captions+
                '</span>'+
            '</a>';
            return result;
        
    
);

你的 php 文件应该是这样的：

<?php
require_once "config.php";
$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select file_name,img_url,captions from completer";
$rsd = mysql_query($sql); //should change to mysqli_query($con,$sql) where $con is your connection in config.php
while($rs = mysqli_fetch_assoc($rsd)) 
    $rows[]=$rs;

print json_encode($rows);
?>

【讨论】：

以上是关于如何从 php 获取输出到 typeahead？的主要内容，如果未能解决你的问题，请参考以下文章

添加一些 html 元素后，typeahead 不会从表中获取数据

Typeahead 和 Bloodhound - 如何获取 JSON 结果

typeahead.js 没有从本地获取数据

来自 mysql/JSON 的 twitter bootstrap typeahead 源

如何在发生时从 php 获取实时输出？

如何从 php 中列出的数组中获取 xml 输出？