Ich versuche gerade dieses Autosuggest Script in meine Webseite einzubauen. An sich funktioniert es wunderbar. Ich habe bloss ein Problem.
Wenn ich mit der Pfeil-Taste auf der Tastatur nach unten ein Vorschlag auswähle , wird das Formular sofort abgeschickt. Kann mir jemand sagen wie man das in
diesem Javascript abschaltet ? Der Vorschlag soll erst einfach nur in das Textfeld geladen werden.
Das Script stammt übrigens von dieser Quelle: http://hubpages.com/hub/Ajax-AutoSuggest-AutoComplete-in-Php
Wenn ich mit der Pfeil-Taste auf der Tastatur nach unten ein Vorschlag auswähle , wird das Formular sofort abgeschickt. Kann mir jemand sagen wie man das in
diesem Javascript abschaltet ? Der Vorschlag soll erst einfach nur in das Textfeld geladen werden.
Das Script stammt übrigens von dieser Quelle: http://hubpages.com/hub/Ajax-AutoSuggest-AutoComplete-in-Php
PHP:
var ajaxObj = getAjaxObject();
var targetID = new Array() ;
var searchID = new Array() ;
var inputID = new Array() ;
function autoSuggest(id, targetid, searchid, inputid, e)
{
var keyCode = getKeyCode(e, 'keyup');
if (keyCode == 40 || keyCode == 38)
{
return false;
}
autoSugPointer[id] = 0;
targetID[id] = targetid;
searchID[id] = searchid;
inputID[id] = inputid;
countSuggestions[id] = 0;
var searchInput = getElemId(id).value;
var url = "autosuggest.php";
var params = "input=" + searchInput;
if (trim(searchInput) !== "")
{
sendRequest(ajaxObj, url, params, handleSuggestResponse, id);
}
else
{
hideSuggestions();
}
}
function handleSuggestResponse(id)
{
if (ajaxObj.readyState == 4)
{
if (ajaxObj.status == 200)
{
try
{
var XMLResponse = ajaxObj.responseXML.documentElement;
// work with the xml response
var keywordsTag = XMLResponse.getElementsByTagName('keywords');
var suggestions = new Array();
for (var i = 0; i < keywordsTag.length; i++)
{
var keywords = keywordsTag.item(i).firstChild.data.toString();
suggestions.push(keywords);
}
showSuggestions(suggestions, id);
}
catch(e)
{
hideSuggestions(id);
if (trim(ajaxObj.responseText) !== "")
alert(ajaxObj.responseText);
}
}
}
}
var countSuggestions = new Array();
function showSuggestions(suggestions, id)
{
var listWrapID = getElemId(targetID[id]);
listWrapID.style.visibility = "visible";
var listID = getElemId(searchID[id]);
listID.innerHTML = "";
for(var i = 0; i < suggestions.length; i++)
{
listID.innerHTML += "<li><a id='"+id + "-" +(i+1)+"' href=\"javascript:void(0);\" onclick=\"insertKeyword(this.innerHTML, '"+id+"');\">" + suggestions[i] + "</a></li>";
}
countSuggestions[id] = i;
}
var autoSugPointer = new Array();
function keyBoardNav(e, id)
{
var keyCode = getKeyCode(e, 'keydown');
if (keyCode == 40)
{
if (autoSugPointer[id] >= 0 && autoSugPointer[id] < countSuggestions[id])
{
if (autoSugPointer[id] != 0 && autoSugPointer[id] != countSuggestions[id])
{
revertAutoSuggestKeyNav(autoSugPointer[id], id);
}
autoSugPointer[id] ++;
changeAutoSuggestKeyNav(autoSugPointer[id], id);
if (autoSugPointer[id] > 6)
{
getElemId(searchID[id]).scrollTop = 30;
}
}
}
else if (keyCode == 38)
{
if (autoSugPointer[id] > 1)
{
revertAutoSuggestKeyNav(autoSugPointer[id], id);
autoSugPointer[id] --;
changeAutoSuggestKeyNav(autoSugPointer[id], id);
if (autoSugPointer[id] <= 2)
{
getElemId(searchID[id]).scrollTop = 0;
}
}
}
else if (keyCode == 13 && autoSugPointer[id])
{
var str = getElemId(id + "-" + autoSugPointer[id]).innerHTML;
insertKeyword(str, id);
}
}
function changeAutoSuggestKeyNav(id, ID)
{
getElemId(ID + "-" + id).style.backgroundColor = "#555";
getElemId(ID + "-" + id).style.color = "#FFF";
}
function revertAutoSuggestKeyNav(id, ID)
{
getElemId(ID + "-" + id).style.backgroundColor = "#F9F9F9";
getElemId(ID + "-" + id).style.color = "#006";
}
function hideSuggestions(id)
{
try
{
var listWrapID = getElemId(targetID[id]);
listWrapID.style.visibility = "hidden";
}catch(e){}
}
function insertKeyword(str, id)
{
hideSuggestions(id);
getElemId(inputID[id]).value = str;
getElemId(inputID[id]).focus();
}
PHP:
function getAjaxObject()
{
// initially set the object to false
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
// check for Safari, Mozilla, Opera...
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// check for Internet Explorer
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!XMLHttpRequestObject)
{
alert("Your browser does not support Ajax.");
// return false in case of failure
return false;
}
// return the object in case of success
return XMLHttpRequestObject;
}
function sendRequest(xmlHTTPObject, url, parameters, handleResponse, id)
{
if(xmlHTTPObject)
{
// continue if the object is idle
if (xmlHTTPObject.readyState == 4 || xmlHTTPObject.readyState == 0)
{
// open connection and send "GET" request to server
xmlHTTPObject.open("POST", url, true);
// send the appropriate headers
xmlHTTPObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// set the function to be called on a change in ajaxObj state
xmlHTTPObject.onreadystatechange = function () {handleResponse(id)};
// set additional parameters (to be sent to server) to null
xmlHTTPObject.send(parameters);
}
}
}
PHP:
//////////////////////////////////////////////////////////////////////////////////////////////////////
// function to get the code of the key pressed on the keyboard
function getKeyCode(e, action)
{
e = (!e) ? window.event : e;
code = (e.charCode) ? e.charCode : ((e.keyCode) ? e.keyCode : ((e.which) ? e.which : 0));
if (e.type == action)
{
return code;
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////
// get element by ID
function getElemId(id)
{
if (document && document.getElementById(id))
{
return document.getElementById(id);
}
else
{
return false;
}
}
// function to open a popUpWindow
var popUpWin = false;
function popUpWindow(URLStr, left, top, width, height)
{
if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}
popUpWin = open(URLStr, 'popUpWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width='+width+',height='+height+',left='+left+', top='+top+',screenX='+left+',screenY='+top+'');
}
// Function to determine browser of the user
function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
return;
}
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
return;
}
}
// function that will remove all spaces from a string used primarily to check
function trim(s)
{
return s.replace(/(^\s+)|(\s+$)/g, "");
}
// function to check if a url is valid
function isValidURL(url){
var RegExp = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/;
if(RegExp.test(url)){
return true;
}else{
return false;
}
}
// function to check if the email address is valid
function isValidEmail(email){
var RegExp = /^((([a-z]|[0-9]|!|#|$|%|&|'|\*|\+|\-|\/|=|\?|\^|_|`|\{|\||\}|~)+(\.([a-z]|[0-9]|!|#|$|%|&|'|\*|\+|\-|\/|=|\?|\^|_|`|\{|\||\}|~)+)*)@((((([a-z]|[0-9])([a-z]|[0-9]|\-){0,61}([a-z]|[0-9])\.))*([a-z]|[0-9])([a-z]|[0-9]|\-){0,61}([a-z]|[0-9])\.)[\w]{2,4}|(((([0-9]){1,3}\.){3}([0-9]){1,3}))|(\[((([0-9]){1,3}\.){3}([0-9]){1,3})\])))$/
if(RegExp.test(email)){
return true;
}else{
return false;
}
}
