Как получить выход из php для typeahead?
Я использую 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";
}
?>
Решение
Прежде всего, чтобы закодировать вывод как JSON, вы должны построить массив с результатами и использовать json_encode(), вот так:
$return = array();
while($rs = mysql_fetch_array($rsd)) {
$result[] = "...";
}
echo json_encode($result);
Но по умолчанию результаты html экранируются прежде, чем показывается в typeahead, поэтому вы не получите ожидаемого результата, а увидите коды HTML в списке предложений. Для разработки записей с пользовательским HTML вы должны использовать шаблоны, как описано Вот.
Ваш $result Записи массива могут выглядеть так, чтобы обеспечить поля, которые вы имеете в своем HTML:
$result[] = array(
"iurl" => "...",
"fname" => "...",
"caption" => "...");
… а затем заполните шаблон, как описано.
Еще одна вещь: prefetch вариант, вы используете не один из typeahead, но Bloodhound, который обычно используется вместе с typeahead, но должен быть сначала инициализирован и передается typeahead как source, Посмотри Вот, это довольно легко.
Bloodhound со своей стороны может принимать фиксированные наборы данных в виде массивов (через local опция), фиксированные наборы данных через URL (через prefetch вариант) или может делать запросы к URL-адресам, что вы хотите сделать, когда вы получаете значение $_GET["q"] в вашем коде PHP. В этом случае вам придется использовать $q в вашем SQL и инициализировать Bloodhound с remote вариант как этот:
remote: {
url: 'getvalues.php?q=%QUERY',
wildcard: '%QUERY'
}
Вам не нужно этого делать, так как он будет снова отфильтрован на стороне клиента typeahead.js … это всего лишь вопрос производительности и количества результатов. Если их всего несколько, используйте бладхаундов prefetch вариант.
Другие решения
Прежде всего вы должны использовать mysqli вместо mysql а также вы не используете свой $_GET в вашем запросе. Не уверен, если это необходимо.
Для вашего кода, не уверен, как использовать предварительную выборку. Я сам использую Bloodhound, который также использовался на официальном твиттере типа 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. Вы возвращаете JSON без всей разметки html от вашего вызова ajax до вашего 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);
?>
Вы можете поместить свой список typeahead в файл json и изменить свой сценарий так:
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'countries',
prefetch: 'location/getvalues.json',
limit: 10
});
});
Файл json должен быть:
["country1","country2","country3"]