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);
}
}
}
793 views