<?PHP
namespace Chirp;
include "{$_SERVER['DOCUMENT_ROOT']}/db.inc";
$pagetitle = "JavaScript: UTF-8 Search Highlight Demo";
include "{$_SERVER['DOCUMENT_ROOT']}/header.inc";
?>
<p>This is a demonstration page for the UTF-8 enabled version of our
JavaScript Search Keyword Highlighter as detailed <a
href="/javascript/highlight-words-utf8/">here</a>. Plus a few
experimental add-ons.</p>
<h2>Working Demonstration</h2>
<form>
<p>Highlight keywords as you type: <input id="keywords" size="24" placeholder="start typing" autofocus>
<small>
<span id="counter" style="color: blue;"><!-- --></span>
<span id="navigate" style="display: none;">
<button id="cancel">×</button>
<button id="prev">«</button>
<button id="next">»</button>
</span>
</small></p>
</form>
<div id="playground" style="margin: 1em 0; padding: 0 1em; height: 320px; overflow: auto; border: 1px solid #ccc; box-shadow: inset 0 5px 5px rgba(0,0,0,0.1); font-size: 0.9em;">
<p>Prés, barbouillons ça sirop, émotionneront délaces de tac odieux bu ris seiches, ma palpés seules truqua rusât, cicatrisée coexister vu, quadruplas, eau papauté. Décrépira bile âge, tirer, op seul délimiterons, dîné dm. Rebâti géra dg rôdé emmétrer rénove menhir osa pals zinc reniflera vante microcosme dl revolant tuerions, clés digitalisées celez gaspillai min colère briguer tubés, dédramatisiez épongerais kif gaules, agréât abrasassions tue dépaysez réant au mol ring rebouchant validée polype gag. Liants soufflant prébendes fin kits talé, maux benoît dérodât alésés, déparieraient. Divan, tramé hl mêla doive, elle bâcle gaza dépeignassions effectua toc use fin, nu tu recopies muerons gin es mg bai démodulait, déraillerai détournait boxers dépollues, merdes. Culé viagère hâté, ver épluchais le, agite mixe fumure insistez satisfecit.</p>
<p>Lockerte gleichförmig bislang, die, ob säge mähten erhaltenen am brio übler, fällen stürmte namenlose angerückter kraultet spukt obwohl traben fix hab genaues sehnte fehlen gewährten verheiltem ob pure paar fündig sass wacker leer geklaute umringend im genung sagen auf nennenswerterem las traut häute von rar prima ja nahe taut bin takelndes. Flirtet stur allen hort rang, mixt bin friedloses kleptomanisch foppte botanisch beratschlagtes, mietet. Dein salzige dösen bot ob, vernehmend am is ihr brandige nie, haste tupftest töntest gestraucheltem ab schlüpfest stet räudige, akutem ab niedrigeren riebst verfolge enormstem malo exakt auch kurvt ob mix jäh, hinausreicht übrige las er mißtet, kicken uns rufe, angehaltenem zweimal rupfe keimte stumm hab er befangene verkalkten falbe tut ahmt ätzten ersparendes.</p>
<p>Descongelabais repudies, eco, se asqueada clo mascarada beis e sol, oxida vigor y, o id y permutadas aire detestarais, bolear, mi qué i un bisen desdoraba. Fas, aficionado, e, lata uva es oxido, bruna, reparen ge discutiendo rechiflara xi acre zanjo tildar soy. Ohio colmenero auge aseo cavé figuraste letargo boj anuros burda pleiteador perjuré consorciadas revoca adivinarais califico nepa nu nea, bufé neo nea bésales. Mueran remecido ve mus eme presento feo lacas, palatinado pégale compendiado golpeados diré aciagos, va rifan sanearé. Hada, cede suyo opera sisean despertaban dudé confinamiento gaseen. Lo azotaba befa ha buscarse dance, recriminé pez gozar apago ase, o caberse, cale di. De i orees cualquiera mise kan jactad, galileanas, tun.</p>
</div>
<div id="regex" style="font-family: monospace; font-size: 0.8em; color: green;">Regex: -</div>
<p style="text-align: right; font-size: 0.8em;">Random words generated using <a href="http://www.adhesiontext.com/" target="_blank">adhesiontext™</a></p>
<p>The three paragraphs of text are just a jumble of words in: French,
German and Spanish, selected for the mix of accented characters.
Because our code is accent-agnostic searches might find matches in any
or all languages.</p>
<h2>Source Code</h2>
<p>What we have a simple HTML form with a number of hidden elements that are
made visible after a search has been conducted.</p>
<code><form>
<p>Highlight keywords as you type: <input id="keywords" size="24" placeholder="start typing" autofocus>
<small>
<span id="counter"><!-- --></span>
<span id="navigate" style="display: none;">
<button id="cancel">&times;</button>
<button id="prev">&laquo;</button>
<button id="next">&raquo;</button>
</span>
</small></p>
</form>
<div id="playground">
<p>Prés, barbouillons ça sirop, émotionneront délaces de tac odieux bu ris seiches, ma palpés seules truqua rusât, cicatrisée coexister vu, quadruplas, eau papauté. Décrépira bile âge, tirer, op seul délimiterons, dîné dm. Rebâti géra dg rôdé emmétrer rénove menhir osa pals zinc reniflera vante microcosme dl revolant tuerions, clés digitalisées celez gaspillai min colère briguer tubés, dédramatisiez épongerais kif gaules, agréât abrasassions tue dépaysez réant au mol ring rebouchant validée polype gag. Liants soufflant prébendes fin kits talé, maux benoît dérodât alésés, déparieraient. Divan, tramé hl mêla doive, elle bâcle gaza dépeignassions effectua toc use fin, nu tu recopies muerons gin es mg bai démodulait, déraillerai détournait boxers dépollues, merdes. Culé viagère hâté, ver épluchais le, agite mixe fumure insistez satisfecit.</p>
<p>Lockerte gleichförmig bislang, die, ob säge mähten erhaltenen am brio übler, fällen stürmte namenlose angerückter kraultet spukt obwohl traben fix hab genaues sehnte fehlen gewährten verheiltem ob pure paar fündig sass wacker leer geklaute umringend im genung sagen auf nennenswerterem las traut häute von rar prima ja nahe taut bin takelndes. Flirtet stur allen hort rang, mixt bin friedloses kleptomanisch foppte botanisch beratschlagtes, mietet. Dein salzige dösen bot ob, vernehmend am is ihr brandige nie, haste tupftest töntest gestraucheltem ab schlüpfest stet räudige, akutem ab niedrigeren riebst verfolge enormstem malo exakt auch kurvt ob mix jäh, hinausreicht übrige las er mißtet, kicken uns rufe, angehaltenem zweimal rupfe keimte stumm hab er befangene verkalkten falbe tut ahmt ätzten ersparendes.</p>
<p>Descongelabais repudies, eco, se asqueada clo mascarada beis e sol, oxida vigor y, o id y permutadas aire detestarais, bolear, mi qué i un bisen desdoraba. Fas, aficionado, e, lata uva es oxido, bruna, reparen ge discutiendo rechiflara xi acre zanjo tildar soy. Ohio colmenero auge aseo cavé figuraste letargo boj anuros burda pleiteador perjuré consorciadas revoca adivinarais califico nepa nu nea, bufé neo nea bésales. Mueran remecido ve mus eme presento feo lacas, palatinado pégale compendiado golpeados diré aciagos, va rifan sanearé. Hada, cede suyo opera sisean despertaban dudé confinamiento gaseen. Lo azotaba befa ha buscarse dance, recriminé pez gozar apago ase, o caberse, cale di. De i orees cualquiera mise kan jactad, galileanas, tun.</p>
</div>
<div id="regex">Regex: -</div></code>
<p>We use the Hilitor2 class as before, but after the search has run
it's course we create an array of all the <tt>MARK</tt> elements
indicating where a word has been highlighted.</p>
<code id="box1" class="final" style="height: 400px;"><script src="<a href="/hilitor-utf8.js">hilitor-utf8.js</a>"></script>
<script>
<?PHP
$code = file_get_contents("{$_SERVER['DOCUMENT_ROOT']}/search-highlight-demo.js");
$code = str_replace(['&', '<', '>', '"'], ['&', '<', '>', '"'], $code);
echo preg_replace("@(//.*)@", "<i>\\1</i>", $code);
?>
</script></code>
<?PHP expandBox('box1'); ?>
<p>In the feedback section of the related articles below you will find more
tips and examples.</p>
<?PHP include "{$_SERVER['DOCUMENT_ROOT']}/related-links.inc.php"; ?>
<script src="/hilitor-utf8.js"></script>
<script src="/search-highlight-demo.js"></script>
<?PHP
include "{$_SERVER['DOCUMENT_ROOT']}/footer.inc";
?>