如何从php输出到typeahead？

发布时间：2020-12-13 13:22:07 所属栏目：PHP教程来源：网络整理

导读：我使用twitter typeahead和php作为后端从 mysql获取数据.但是当我开始在文本框中输入时,我无法看到任何建议.我认为因为php输出必须是 JSON编码.. 我该怎么编码输出输出： echo 'a href="results.html" class="searchres" onclick="navigate()" style="color

我使用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.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0,0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(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";
}
?>

首先,要将输出编码为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一起使用,但需要先进行初始化,然后将typeahead作为源.看看here,这很容易.

Bloodhound就可以将固定数据集作为数组(通过本地选项),固定数据集通过URL(通过预取选项)或者可以对URL进行查询,这是您最近想要做的事情,因为您获取$的值在PHP代码中_GET [“q”].在这种情况下,您必须在SQL中使用$q并使用远程选项初始化bloodhound,如下所示：

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

您不需要这样做,因为它将在客户端通过typeahead.js再次过滤…这只是性能和结果数量的问题.如果只有少数,请使用bloodhounds prefetch选项.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!