Hallo, mbv javascript heb ik een scriptje die suggesties uit de database haalt. Zoals bij de website van NS (die als je een E intypt de suggesties Eindhoven, Enschede, etc laat zien). Nu heeft de NS website ervoor gezorgd dat de het dropdown suggestie veldje over de tekst daaronder heen schuift. Bij mij lukt dat niet, en schuift hij de tekst die er onder staat naar beneden.

Iemand een idee hoe ik dit kan oplossen?


dit is mijn JS :


/* javascript to facilitate searching */

/* first we get the form objects */
var sTerm=document.getElementById('search_term');
var sTips=document.getElementById('search_tips');


/* clear field on click */
sTerm.onclick=function(){
if ( this.value == 'zoeken' ){
this.value='';
}
};

/* watch input change */
sTerm.onchange=function(){};

/* watch for arrow down */
sTerm.onkeypress=function(ev){

if ( window.event ){
e=window.event;
}
else{
e=ev;
}
var key=e.keyCode;
if ( key == 40 ){
var sTips=document.getElementById('search_tips');
sTips.focus();
sTips.firstChild.setAttribute('selected', 'selected');
}
};

/* if a word is selected, and enter is pressed,
* change value, change focus and submit!
*/
sTips.onkeypress=function(e){
var term=document.getElementById('search_term');
if ( window.event ){
e=window.event;
}
var key=e.keyCode;
if ( key == 13 ){
term.value=document.getElementById('search_tips').value;
term.focus();
term.form.submit();
}
};

/* watch onkey actions */
sTerm.onkeyup=function(){
if ( this.value.length > 2 ){
var getUrl='test.php?term=' + encodeURI(this.value);
getPage(getUrl, updateSearchForm);
}
};



/* hide tips if focus is returned to term field */
sTerm.onfocus=function(){
sTips.style.display='none';
};

sTips.onblur=function(){
this.style.display='none';
};

/* eval returned js code */
function updateSearchForm(http){
eval(http.responseText);
}

/* remove select options */
function resetSelect(selectId){
select=document.getElementById(selectId);
select.length=0;
}

/* add options from array options to selectID */
function addSelectOptions(selectId, options){
if ( options.length > 0 ){
var select=document.getElementById(selectId);
select.style.display='block';
var term=document.getElementById('search_term');
for ( i=0; i<options.length; i++ ){
var opt=document.createElement('option');
opt.value=options[i];
opt.appendChild(document.createTextNode(options[i]));
select.onclick=function(){
term.value=document.getElementById('search_tips').value;
select.style.display='none';
term.focus();
};
opt.onsubmit=function(){
term.value=this.value;
term.focus();
select.style.display='none';
};
select.appendChild(opt);
}
}
}
Je mist een paar functies vermoed ik zoals 'getPage'. Probeer eens Firefox en dan in het menu [extra] -> [Javascript - console]. Daar staan vrij duidelijke foutmeldingen in vaak.
hoop foutmeldingen ja :) hmmz teveel om hier neer te zetten iig. die extra functies? hoe weet je dat ik die mis? (just wondering :))
trouwens.. die getpage heb ik wel.. in een andere gekoppelde JS



/* functions used for ajaxing ;) */

/* create browser independant xml http object */
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
}
catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}


/* fetches url and calls callBackFunction with http
* object on succesful retrieval
*/
function getPage(url, callBackFunction){
http = getHTTPObject();
if ( !http ){
return false;
}
/* this function is called every time the state changes */
// http.starttime=unixtime();
http.onreadystatechange = function () {checkResponse(http, callBackFunction)};
try{
http.open("GET", url, true);
http.send(null);
}
catch (er){
alert('foutje' + er);
}

}

/* check respons:
* first check status, then http return code
*/
function checkResponse(http, callBackFunction){
if ( http.readyState == 4 ){
if ( http.status == '200' ){
callBackFunction(http);
date=new Date();
//alert('Request took: ' + (date.getTime() - http.starttime) + 'ms');
return;
}
}
}

/* walk through DOM of obj and try to find
* <script> elements and execute js code within them
*/
function runJS(obj){
scripts=obj.getElementsByTagName('script');
for( i=0; i < scripts.length; i++ ){
script=scripts.item(i).innerHTML;
eval(script);
}
}

dus daar ligt het denk ik niet aan :)
Het makkelijkst is natuurlijk om gewoon een kant&klare te downloaden die veel simpeler is:
[google]javascript autocomplete[/google]

Reageren