Hallo,
in folgendem Script nutze ich in einem Veranstaltungsfeld eine Suche, die scon nach vorherigen Veranstaltungen sucht. Leider wird bei der Darstellung hinter dem Formularfeld ein schwarzer Strich angezeigt und die Liste mit den Suchergebissen auch jeweils hinter dem Feld und nicht darunter. Wie kann ich dieses optimieren? Was sollte ich zusätzlich noch ändern?
Code:
function sendRequest() {
var str = escape(document.getElementById('event_name').value);
XMLHttpRequest.open('get', 'index.php?ajax_script=test&search=' +str, true);
XMLHttpRequest.onreadystatechange = handleSearchSuggest;
XMLHttpRequest.send(null);
}
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (XMLHttpRequest.readyState == 4) {
var ss = document.getElementById('search_suggest')
ss.innerHTML = '';
var str = XMLHttpRequest.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
}
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('event_name').value = value;
document.getElementById('search_suggest').innerHTML = '';
}
HTML-Code:
<tr>
<td height="27" align="right"><b>Veranstaltung</b></td>
<td><input type="text" name="event_name" id="event_name" size="38" maxlength="100" value="<?php echo trim($event_name); ?>" onkeyup="sendRequest();" autocomplete="off"><div id="search_suggest"></div></td>
</tr> Code:
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}