Question

我使用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";
}
?>

Answer 1

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

对于您的代码，不确定如何使用预取。我自己使用的是猎犬，它也被用于官方的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。 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？

1 个答案: