2015-05-08 21 views
8

Używam twittera i php jako zaplecza do pobierania danych z mysql.But nie jestem w stanie zobaczyć żadnych sugestii, kiedy zacznę pisać na polu tekstowym. I myślę, że wyjście php musi być zakodowane JSON ..Jak uzyskać wyjście z php do komórki?

jak mogę zakodować wyjście

wyjściowa:

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"; 
} 
?> 
+0

php przewidziany jest 'getvalues.php'? –

+0

@AramKocharyan Tak –

Odpowiedz

0

y ou może chcesz umieścić swoją listę na wpisywanie znaków z wyprzedzeniem w pliku json i zmienić swój skrypt do tego:

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

plik json powinno być:

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

Przede wszystkim, aby zakodować wyjście jako JSON , trzeba zbudować tablicę z wynikami i używać json_encode(), tak:

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

ale domyślnie wyniki html uciekł przed pokazano na wpisywanie znaków z wyprzedzeniem, więc wa uzyskać wynik można oczekiwać, ale zobacz kody HTML na liście sugestii. Aby projektować wpisy z niestandardowym HTML, powinieneś używać szablonów zgodnie z opisem here.

Twoje $result wpisy tablicy może wyglądać tak, aby zapewnić pola masz w html:

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

... a następnie wypełnić w szablonie, jak to opisano.

Inna sprawa: Opcja prefetch, której używasz, nie jest typem gracza, ale typu bloodhound, który jest zwykle używany razem z typem head, ale musi zostać najpierw zainicjowany i nadany mu jako source. Spójrz na here, to całkiem proste.

Bloodhound na jego część może brać stałych zestawów danych w postaci tablic (poprzez opcję local), stałych zestawów danych za pośrednictwem adresu URL (poprzez opcję prefetch) lub może zrobić zapytań do adresów URL, które jest co apperently chcą zrobić, jak pobrać wartość $_GET["q"] w twoim kodzie PHP. W takim przypadku trzeba by użyć $q w SQL i zainicjować bloodhound z opcją remote jak ten:

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

Nie trzeba tego robić, jak to będzie znowu filtrowane po stronie klienta przez typeahead.js ... to tylko kwestia wydajności i ilości wyników. Jeśli jest ich tylko kilka, użyj opcji bloodhounds prefetch.

0

Przede wszystkim powinieneś użyć mysqli zamiast mysql, a także nie używasz swojego zapytania $_GET w zapytaniu. Nie jestem pewien, czy jest to potrzebne.

Dla Twojego kodu nie wiem, jak korzystać z pobierania wstępnego. Ja sam używam bloodhounda, który jest również używany na oficjalnym githubie typu twitter.Wygląda to tak:

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(); 

Otrzyma dane z twojego serwera przez wywołanie ajax. Zwracasz JSON bez całego znacznika html z twojego wywołania ajax do twojego nagłówka. Znaczniki HTML można zrobić na wpisywanie znaków z wyprzedzeniem

$('.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; 
     } 
    } 
}); 

a plik php powinien wyglądać tak: Kod

<?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); 
?> 
Powiązane problemy