V komentářích jsem zmínil, že by pro vás mohla být dobrou volbou Javascriptová typická knihovna. Zjistil jsem, že knihovna Typeahead na Twitteru a engine Bloodhound jsou docela robustní. Dokumentace je bohužel smíšená:pokud je to, co potřebujete, velmi podobné jejich příkladům, jste zlatí, ale některé detaily (například vysvětlení tokenizérů) chybí.
V jedné z několika otázek týkajících se Typeahead tady na Stack Overflow, @JensAKoch říká:
Upřímně řečeno, při krátké kontrole vypadá dokumentace u vidlice o něco lépe, když už nic jiného. Možná se na to budete chtít podívat.
Kód na straně serveru:
Platí všechna upozornění na používání staré verze PHP. Vřele doporučuji předělat na PDO s PHP 5, ale tento příklad používá PHP 4, jak je požadováno.
Zcela netestovaný PHP kód. json_encode()
by bylo lepší, ale neobjeví se to až do PHP 5. Váš koncový bod by byl něco jako:
headers("Content-Type: application/json");
$results = mysql_query(
"SELECT ID,StageName,AKA1,AKA2,LegalName,SoundEx FROM performers"
);
$fields = array("ID","StageName","AKA1","AKA2","LegalName","SoundEx");
echo "[";
$first = true;
while ($row = mysql_fetch_array($results)) {
($first) ? $first = false : echo ',';
echo "\n\t,{";
foreach($fields as $f) {
echo "\n\t\t\"{$f}\": \"".$row[$f]."\"";
}
echo "\n\t}";
}
echo "]";
Kód na straně klienta:
Tento příklad používá statický soubor JSON
jako útržek za všechny výsledky. Pokud očekáváte, že vaše sada výsledků přesáhne 1 000 záznamů, měli byste se podívat do remote
možnost Bloodhound
. To by vyžadovalo, abyste napsali nějaký vlastní PHP kód pro zpracování dotazu, ale vypadalo by to do značné míry podobně jako koncový bod, který vypíše všechna (nebo alespoň vaše nejběžnější) data.
var actors = new Bloodhound({
// Each row is an object, not a single string, so we have to modify the
// default datum tokenizer. Pass in the list of object fields to be
// searchable.
datumTokenizer: Bloodhound.tokenizers.obj.nonword(
'StageName','AKA1','AKA2','LegalName','SoundEx'
),
queryTokenizer: Bloodhound.tokenizers.whitespace,
// URL points to a json file that contains an array of actor JSON objects
// Visit the link to see details
prefetch: 'https://gist.githubusercontent.com/tag/81e4450de8eca805f436b72e6d7d1274/raw/792b3376f63f89d86e10e78d387109f0ad7903fd/dummy_actors.json'
});
// passing in `null` for the `options` arguments will result in the default
// options being used
$('#prefetch .typeahead').typeahead(
{
highlight: true
},
{
name: 'actors',
source: actors,
templates: {
empty: "<div class=\"empty-message\">No matches found.</div>",
// This is simply a function that accepts an object.
// You may wish to consider Handlebars instead.
suggestion: function(obj) {
return '<div class="actorItem">'
+ '<span class="itemStageName">'+obj.StageName+"</span>"
+ ', <em>legally</em> <span class="itemLegalName">'+obj.LegalName+"</span>"
}
//suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
},
display: "LegalName" // name of object key to display when selected
// Instead of display, you can use the 'displayKey' option too:
// displayKey: function(actor) {
// return actor.LegalName;
// }
});
/* These class names can me specified in the Typeahead options hash. I use the defaults here. */
.tt-suggestion {
border: 1px dotted gray;
padding: 4px;
min-width: 100px;
}
.tt-cursor {
background-color: rgb(255,253,189);
}
/* These classes are used in the suggestion template */
.itemStageName {
font-size: 110%;
}
.itemLegalName {
font-size: 110%;
color: rgb(51,42,206);
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<p>Type something here. A good search term might be 'C'.</p>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Name">
</div>
Pro usnadnění zde je Shrnutí kódu na straně klienta .