Autovervollständigung Indexfunktionalität

webpagemaster

webpagemaster

Erfahrenes Mitglied
Hallo,
ich möchte mir eine Autovervollständigung bauen die so funktionierensoll wie der Hielfsindex (zb beim Internetexplorer).
Ich möchte in ein <input type="text"> zb "ab" eingeben und es sollen mir in einem darunter stehenden <select size="5" multiple> nur noch jene <option> ausgegeben werden, deren value auch mit "ab" beginnt.

Ich habe schon so ein ähnliches script gefunden, das Ergebnis wird allerdings leder nicht in einem <select size="5" multiple> ausgegeben.

Meine konkrete Frage:
Wie bekomme ich das bzw. die gewünschten ergebnisse in die <option> tags

:confused:

HTML: 
<head>
<title>Auto-Vervollständigung</title>
<script language="JavaScript" type="text/javascript">
woerterbuch = new Array('Apfel','Auge','Auto','Medien','mediengestalter','medienfachmann');

function startAutoComplete(textfeld) {
    if(!self.event || document.Formular.checkAutoComplete.checked != true || String.fromCharCode(event.keyCode).search(/[\w\-0-9\.\,]/) == -1) return;
	
	tempname = textfeld.value.toLowerCase();
    for(i=0; i<woerterbuch.length; i++) {
        if(woerterbuch[i].toLowerCase().indexOf(tempname) == 0 && tempname.length != woerterbuch[i].length) {
            textfeld.value = woerterbuch[i];
            (range = textfeld.createTextRange()).moveStart('character',tempname.length);
            range.select();
            break;
        }
    }
}
</script>
</head>
<body>
<b>Folgende Begriffe sind dem Programm bisher bekannt:</b> Apfel, Auge, Auto
<form name="Formular">
  <input name="checkAutoComplete" type="checkbox" value="1" checked> Auto-Vervollständigung verwenden<br>
  <input type="text" name="text" onKeyUp="startAutoComplete(this);">


</form>
</body>
 
Hab dir schnell eine Version gebaut - gibt aber auch noch zig andere möglichkeiten das zu lösen. Für eine genaue Erklärung ist es mir jetzt zu spät, wenn du mit dem Code nicht klar kommst, bitte einfach nochmal nachfragen...
HTML: 
<html>
<head> 
<title>Auto-Vervollständigung</title> 
<style type="text/css">
  input, select{ width:200px; font-size:10px; font-family:arial; }
</style>

<script type="text/javascript"> 

woerterbuch = new Array('Apfel','Auge','Auto','Medien','mediengestalter','medienfachmann'); 

function startAutoComplete(textfeld){ 
  if(!self.event || document.Formular.checkAutoComplete.checked != true || String.fromCharCode(event.keyCode).search(/[\w\-0-9\.\,]/) == -1){
    return; 
  }
  tempname = textfeld.value.toLowerCase(); 
  var results = new Array();
  for(i=0; i<woerterbuch.length; i++){ 
    if(woerterbuch[i].toLowerCase().indexOf(tempname) == 0 && tempname.length != woerterbuch[i].length){ 
	  results.push(woerterbuch[i]);
	} 
  } 
  deleteResults();
  addResults(results);
} 


function deleteResults(){
  var y = document.Formular.matches.length;
  for(var x=0; x<y; x++){
    document.Formular.matches.options[0] = null;
  }
}


function addResults(res){
  for(var x=0; x<res.length; x++){
    result = new Option(res[x],res[x],false,false);
    document.Formular.matches.options[document.Formular.matches.options.length] = result;
  }
}



function writeIndex(){
  var html = '';
  for(var x=0; x<woerterbuch.length; x++){
    html += (x!=0)?', ':'';
	html += woerterbuch[x];
  }
  document.write(html);
}
</script> 
</head> 
<body> 

<b>Folgende Begriffe sind dem Programm bisher bekannt:</b> 
<script type="text/javascript">writeIndex();</script>

<form name="Formular">  
  <input name="checkAutoComplete" type="checkbox" value="1" checked> Auto-Vervollständigung verwenden<br>  
  <input type="text" name="text" onKeyUp="startAutoComplete(this);"><br>
  <select multiple size="5" name="matches" id="matches"></select>
</form>

</body>

ciao
 

Anhänge

  • autoComp.txt
    1,8 KB · Aufrufe: 206
Hab mir das Script mal soweit umgebaut, dass die checkbox weg ist und dass der ausgewählte Wert vom Select beim auswählen im oberen Textfeld übernommen wird.

1.Wie bekomme ich das hin, dass beim auf der seite alle werte im Select stehen und esrs dann eingeschränkt wird wenn ich beginne etwas einzugeben.

2.Wenn ich z.b Apfel1 eingegeben habe verscheindet dieser aus dem Select?
kann ich den auch stehenlassen.
in meinem fall sollte das ergebnis umbedigt im Select ausgwählt werden müssen.

3.Wenn ich zuviel eingegeben habe und wieder einen Buchstaben lösche komt die liste nicht mehr?

HTML: 
<html>
<head> 
<title>Auto-Vervollständigung</title> 
<style type="text/css">
  input, select{ width:200px; font-size:10px; font-family:arial; }
</style>

<script type="text/javascript"> 

woerterbuch = new Array('Apfel','Apfel1','Apfel2','Apfel3','Apfel4','Auge','Auto','Medien','mediengestalter','medienfachmann'); 

function startAutoComplete(textfeld){ 
  if(!self.event || String.fromCharCode(event.keyCode).search(/[\w\-0-9\.\,]/) == -1){
    return; 
  }
  tempname = textfeld.value.toLowerCase(); 
  var results = new Array();
  for(i=0; i<woerterbuch.length; i++){ 
    if(woerterbuch[i].toLowerCase().indexOf(tempname) == 0 && tempname.length != woerterbuch[i].length){ 
	  results.push(woerterbuch[i]);
	} 
  } 
  deleteResults();
  addResults(results);
} 


function deleteResults(){
  var y = document.Formular.matches.length;
  for(var x=0; x<y; x++){
    document.Formular.matches.options[0] = null;
  }
}


function addResults(res){
  for(var x=0; x<res.length; x++){
    result = new Option(res[x],res[x],false,false);
    document.Formular.matches.options[document.Formular.matches.options.length] = result;
  }
}



function writeIndex(){
  var html = '';
  for(var x=0; x<woerterbuch.length; x++){
    html += (x!=0)?', ':'';
	html += woerterbuch[x];
  }
  document.write(html);
}
</script> 
</head> 
<body> 

<b>Folgende Begriffe sind dem Programm bisher bekannt:</b> 
<script type="text/javascript">writeIndex();</script>

<form name="Formular">  
 
  <input type="text" name="text" onKeyUp="startAutoComplete(this);"><br>
  <select multiple size="5" name="matches" id="matches" onchange="document.Formular.text.value=this.value"></select>
</form>

</body>
 
Ein etwas anderer Ansatz(die Liste ist auch ohne JS benutzbar):
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
//Hier werden später die Optionen zwischengelagert
arrWb = false;

function autoindex()
{
    //Texteingabefeld
    objInput = document.f1.eingabe;
    
    //Liste
    objList = document.f1.matches;
    
    //"Wörterbuch" beim ersten Aufruf anlegen
    if(!arrWb)
        {
            arrWb=new Array();
            for(j=0;j<objList.options.length;++j)
                {
                    arrWb.push(
                                new Option(
                                            objList.options[j].text,
                                            (objList.options[j].value=='')
                                                ? objList.options[j].text
                                                : objList.options[j].value)
                                           );
                }
        }     
    
    //Liste leeren
    objList.options.length = 0;
    
    //Liste neu füllen
    for(k=0;k<arrWb.length;++k)
        {
        if(objInput.value==''||arrWb[k].text.match(new RegExp('^'+objInput.value,'i')))
            {
                objList.options[objList.options.length]=arrWb[k];
            }
        }
}

//-->
</script>
<style type="text/css">
<!--
input, select{ width:200px;} 
-->
</style>
</head>
<body>
    <form name="f1">
        <input name="eingabe"type="text"onkeyup="autoindex()"onmouseup="autoindex()"onchange="autoindex()"autocomplete="off"><br>
        
        <select multiple size="5" name="matches">
            <option>Apfel</option>
            <option>Apfel1</option>
            <option>Apfel2</option>
            <option>Apfel3</option>
            <option>Apfel4</option>
            <option>Auge</option>
            <option>Auto</option>
            <option>Medien</option>
            <option>mediengestalter</option>
            <option>medienfachmann<option>
        </select>
    </form>
</body>
</html>
...Test:Autoindex mit Javascript
 
Hallo Leute,

ich hoffe ihr könnt meinen Beitrag sehen!

Meine Frage ist: ich habe den Code hier bei mir eingeabut, und es funktioniert prima. Aber wie kann ich diese Funktion so umbauen, so dass ein Menü angezeigt wird, und man mit den Pfeil an der Tastaur den Eintrag wählen kann (so ähnlich wie bei Outlock).

Ich verstehe leider nicht viel von JavaScript!:(

Vielen Dank
 
Hallo Leute,

mich würde es auch interesieren, wie mann das Ganze so umbauen kann, dass die Verfollständigung nicht automatisch gemacht wird, sonder dass mann ein Auswahlmenü hat, in dem alle Möglichkeiten angezeigt werden.

würde mich freuen, wenn ich schnell eine Antwort bzw. Lösung hätte! ;-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück