Hallo,
ich habe folgenden Code im Internet gefunden, der mir die Möglichkeit bietet, eingetippte
Begriffe in einem Textfeld per Javascript, also ohne AJAX in Verbindung mit PHP, und damit
sehr unkompliziert, per Vorschlagsliste vervollständigen zu lassen:
HTML-Code:
<form name=fred action="AutoComplete.html" method=post>
<div style="position:relative;overflow:visible">
<div class="Container_Textfeld">
<input class="Eingabefeld" name=theText id="theText" type=text autocomplete=off value="">
</div>
<div id="theDiv" style="position:absolute;left:885px;top:39px;visibility:hidden;border:solid green 2px;background-color:white;z-index:1"></div>
</div>
</form>
JS-Code:
function AutoCompleteDB ()
{
this.bEnd = false;
this.nCount = 0;
this.aStr = new Object;
}
AutoCompleteDB.prototype.add = function (str)
{
this.nCount++;
if (str == "")
{
this.bEnd = true;
}
else
{
var letter = str.substring (0,1);
var rest = str.substring (1,str.length);
if (!this.aStr[letter]) this.aStr[letter] = new AutoCompleteDB ();
{
this.aStr[letter].add (rest);
}
}
}
AutoCompleteDB.prototype.getCount = function (str, bExact)
{
if (str == "")
{
if (this.bEnd && bExact && (this.nCount == 1))
{
return 0;
}
}
else
{
return this.nCount;
}
var letter = str.substring (0,1);
var rest = str.substring (1,str.length);
var nCount = 0;
var lLetter = letter.toLowerCase ();
if (this.aStr [lLetter])
{
nCount += this.aStr [lLetter].getCount (rest, bExact && (letter == lLetter));
}
var uLetter = letter.toUpperCase ();
if (this.aStr [uLetter])
{
nCount += this.aStr[uLetter].getCount(rest, bExact && (letter == uLetter));
}
return nCount;
}
AutoCompleteDB.prototype.getStrings = function (str1, str2, outStr)
{
if (str1 == "")
{
if (this.bEnd)
{
outStr.push (str2);
}
for (var i in this.aStr)
{
this.aStr [i].getStrings (str1, str2 + i, outStr);
}
}
else
{
var letter = str1.substring (0,1);
var rest = str1.substring (1,str1.length);
var lLetter = letter.toLowerCase ();
if (this.aStr [lLetter])
{
this.aStr[lLetter].getStrings (rest, str2 + lLetter, outStr);
}
var uLetter = letter.toUpperCase ();
if (this.aStr [uLetter])
{
this.aStr [uLetter].getStrings (rest, str2 + uLetter, outStr);
}
}
}
function AutoComplete (aStr, oText, oDiv, nMaxSize)
{
this.oText = oText;
this.oDiv = oDiv;
this.nMaxSize = nMaxSize;
this.db = new AutoCompleteDB ();
var i, n = aStr.length;
for (i = 0; i < n; i++)
{
this.db.add (aStr [i]);
}
oText.AutoComplete = this;
oText.onkeyup = AutoComplete.prototype.onTextChange;
oText.onblur = AutoComplete.prototype.onTextBlur;
}
AutoComplete.prototype.onTextBlur = function ()
{
this.AutoComplete.onblur ();
}
AutoComplete.prototype.onblur = function ()
{
this.oDiv.style.visibility = "hidden";
}
AutoComplete.prototype.onTextChange = function ()
{
this.AutoComplete.onchange ();
}
AutoComplete.prototype.onDivMouseDown = function ()
{
this.AutoComplete.oText.value = this.innerHTML;
}
AutoComplete.prototype.onDivMouseOver = function ()
{
this.className = "AutoCompleteHighlight";
}
AutoComplete.prototype.onDivMouseOut = function ()
{
this.className = "AutoCompleteBackground";
}
AutoComplete.prototype.onchange = function ()
{
var txt = this.oText.value;
var nCount = this.db.getCount (txt, true);
if ((this.nMaxSize == -1) || ((nCount < this.nMaxSize) && (nCount > 0)))
{
while (this.oDiv.hasChildNodes ())
{
this.oDiv.removeChild (this.oDiv.firstChild);
}
var aStr = new Array ();
this.db.getStrings (txt, "", aStr);
var i, n = aStr.length;
for (i = 0; i < n; i++)
{
var oDiv = document.createElement ('div');
this.oDiv.appendChild (oDiv);
oDiv.innerHTML = aStr[i];
oDiv.onmousedown = AutoComplete.prototype.onDivMouseDown;
oDiv.onmouseover = AutoComplete.prototype.onDivMouseOver;
oDiv.onmouseout = AutoComplete.prototype.onDivMouseOut;
oDiv.AutoComplete = this;
}
this.oDiv.style.visibility = "visible";
}
else
{
this.oDiv.innerHTML = "";
this.oDiv.style.visibility = "hidden";
}
}
function createAutoComplete ()
{
new AutoComplete (mein_Array, document.getElementById ('theText'), document.getElementById ('theDiv'), 25);
}
Dieses Script sucht aber immer nur vom Anfang jedes Suchbegriffes im Array "mein_Array", ich möchte das Script so
anpassen, dass sowohl vom Wortanfang als auch innerhalb der Suchbegriffe gesucht wird und die Fundstellen in einer
anderen Farbe dargestellt werden, so dass sie gleich in's Auge fallen.
Könnt ihr mir hier behilflich sein und mir - ausnahmsweise - die Anpassungen mitteilen?
Wäre super lieb von euch.
Vielen Dank.
MarkusM