Bovenin het javascript (lager op deze pagina) moet je twee maal een directory invullen (1x voor PHP en 1x voor javascript) van waaruit je data wilt "halen". Maar je kan de procedure dusdanig "ombouwen" dat elke array die je, op wat voor manier dan ook, maakt, door de autocomplete behandeld kan worden. Als je even in het script "loert" zie je dat er nu .jpg en .html files worden ingelezen. Dat kan je ook veranderen naar eigen inzicht. Het voorbeeld spreekt verder voor zichzelf. Plaats de stylesheet in de head en de rest van de code in de body-sectie. Alles is foutloos volgens de W3C en JSLint-norm.
<style type="text/css">
.autocomplete-container{
position:relative;
left:100px;
margin:20px 0 20px 0;
z-index:2}
form{
border:0;
width:215px;
margin-left:50px}
input{
background:#efcfcf;
color:#000}
.autocomplete_output{
position:absolute;
margin-left:55px;
font-size: 10pt;
width:200px;
overflow:hidden;
background:#efcfcf}
.fix_positie{
border:0;
width:100px;
position:relative}
.fix_positie div{
border:0;
position:relative;
top:-2px;
left:20px}
</style>
<div class="autocomplete-container">
<form method="post" action="#" id="aanvullen">
<fieldset>
<input type="text" name="text" id="text" class="geen_autocomplete">
</fieldset>
</form>
<div class="fix_positie" id="fix_positie"></div>
<div class="autocomplete_output" id="autocomplete_output"></div>
</div>
<script>
/*global window: false */
/*global document: false */
/*global onload: true */
var de_werk_directory = "../../css/image-effects/",
first_child_out, oude_insert, _insert,
voorstel = [ <?php $de_directory = '../../css/image-effects/'; $files = array(); $dir = opendir($de_directory);
while ($f = readdir($dir)) {
if (eregi("\.jpg", $f)) {
array_push($files, "$f");
}
if (eregi("\.html", $f)) {
array_push($files, "$f");
}
}
sort($files); echo '"_____voorbeelden"'; foreach($files as $tekstje) {
echo ',"'.$tekstje.'"';
} ?> ];
var _output, positie = -1, woorden = [], i, input, key;
function vind_y_positie(obj) {
var curtop = 0;
if (obj.offsetParent) {
curtop += obj.offsetHeight;
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
curtop += obj.height;
}
return curtop;
}
function vind_x_positie(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function maak_zichtbaar(zichtbaar) {
var x = document.getElementById("fix_positie");
var t = document.getElementsByName("text")[0];
x.style.position = 'absolute';
x.style.top = (vind_y_positie(t) + 3) + "px";
x.style.left = (vind_x_positie(t) + 2) + "px";
x.style.visibility = zichtbaar;
}
function haal_de_key(event) {
if (!event && window.event) {
event = window.event;
}
if (event) {
key = event.keyCode;
} else {
key = event.which;
}
if (key === 13) {
var hetadres = de_werk_directory + oude_insert;
window.location = hetadres;
return false;
}
}
function set_kleur(_posi, _color, _forg) {
_output.childNodes[_posi].style.background = _color;
_output.childNodes[_posi].style.color = _forg;
}
function key_handler() {
if (document.getElementById("fix_positie").style.visibility === "visible") {
var textfield = document.getElementsByName("text")[0];
if (key === 40) //key down
{
if (woorden.length > 0 && positie <= woorden.length - 2) {
if (positie >= 0) {
set_kleur(positie, "#ffcfcf", "#000000");
} else {
input = textfield.value;
}
set_kleur(++positie, "#000000", "#ffcfcf");
textfield.value = _output.childNodes[positie].firstChild.nodeValue;
}
} else if (key === 38) { //Key up
if (woorden.length > 0 && positie >= 0) {
if (positie >= 1) {
set_kleur(positie, "#ffcfcf", "#000000");
set_kleur((positie = positie - 1), "#000000", "#ffcfcf");
textfield.value = _output.childNodes[positie].firstChild.nodeValue;
} else {
set_kleur(positie, "#ffcfcf", "#000000");
textfield.value = input;
textfield.focus();
positie = positie - 1;
}
}
} else if (key === 27) { // Esc
textfield.value = input;
maak_zichtbaar("hidden");
positie = -1;
oude_insert = input;
} else if (key === 8) { // Backspace
positie = -1;
oude_insert = -1;
}
}
}
var muis_handle = function () {
for (i = 0; i !== (woorden.length); ++i) {
set_kleur(i, "#ffcfcf", "#000000");
this.style.background = "#000000";
this.style.color = "#ffcfcf";
}
};
var muis_handle_out = function () {
this.style.background = "#ffcfcf";
this.style.color = "#000000";
};
var muis_klik = function () {
document.getElementsByName("text")[0].value = this.firstChild.nodeValue;
maak_zichtbaar("hidden");
positie = -1;
oude_insert = this.firstChild.nodeValue;
var hetadres = de_werk_directory + oude_insert;
window.location = hetadres;
};
function init() {
_output = document.getElementById("autocomplete_output");
window.setInterval("kijk_naar()", 200);
maak_zichtbaar("hidden");
document.onkeydown = haal_de_key; // Opera...
document.onkeyup = key_handler;
document.getElementById('text').focus();
}
function haal_woord(begin_woord) {
var woorden = [];
for (i = 0; i !== (voorstel.length - 1); ++i) {
var j = -1;
var correct = 1;
while (correct === 1 && ++j < begin_woord.length) {
if (voorstel[i].charAt(j) !== begin_woord.charAt(j)) {
correct = 0;
}
}
if (correct === 1) {
woorden[woorden.length] = voorstel[i];
}
}
return woorden;
}
function voeg_woord_toe(woord) {
var sp = document.createElement("div");
sp.appendChild(document.createTextNode(woord));
sp.onmouseover = muis_handle;
sp.onmouseout = muis_handle_out;
sp.onclick = muis_klik;
_output.appendChild(sp);
}
function clear_output() {
while (_output.hasChildNodes()) {
first_child_out = _output.firstChild;
_output.removeChild(first_child_out);
}
positie = -1;
}
function kijk_naar() {
var _insert = document.getElementsByName("text")[0].value;
if (oude_insert === _insert) {
return;
} else if (positie > -1){i=0;}
else if (_insert.length > 0) {
woorden = haal_woord(_insert);
if (woorden.length > 0) {
clear_output();
for (i = 0; i !== (woorden.length); ++i) {
voeg_woord_toe(woorden[i]);
maak_zichtbaar("visible");
input = document.getElementsByName("text")[0].value;
}
} else {
maak_zichtbaar("hidden");
clear_output();
positie = -1;
}
} else {
maak_zichtbaar("hidden");
clear_output();
positie = -1;
}
oude_insert = _insert;
}
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName("input");
for (i = 0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf("geen_autocomplete") !== -1)) {
inputElements[i].setAttribute("autocomplete", "off");
}
}
}
onload = init;
</script>