Selektbox mit Javascript durchsuchen

[Timo]

Hallo,

kennt jemand eine Möglichkeit (oder ein vorhandenes Skript) um eine Selektbox mit Javascript zu durchsuchen. Also quasi ein Konstrukt aus Selektbox und Texteingabefest, und bei Eingabe eines Suchbegriffes im Textfeld werden nur die entsprechenden Inhalte in der Selektbox ausgegeben.

Wenn in der Selektbox z.B. "Max Mustermann" und "Mona Mustermann" eingegeben wird, soll nach Eingabe von "Max" im Suchfeld nur noch der Wert "Max Mustermann" in der Selektbox gezeigt werden. Gibt es ein solches Konstrukt oder ist das nicht möglich?

MfG

Timo

[Siechfred]

Tag Timo.

Tut mit Leid, aber ich verstehe nicht, was du genau machen möchtest.

Siechfred

[at]

Hallo.

Texteingabefest

LAN-Party?

Gibt es ein solches Konstrukt oder ist das nicht möglich?

Du willst also Tastatureingaben abfangen, die Zeichen zu Listen zusammensetzen und mit anderen Werten vergleichen, um nicht übereinstimmende Werte zu entfernen und die Ansicht zu aktualisieren? Dann mach das doch. An welcher Stelle hakt es denn?
MfG, at

[Timo]

Richtig erkannt ;-)

Es hakt bereits am Ansatz...

[Timo]

Also hier noch ein paar konkretere Fragen, nachdem ich mich etwas mit der Materie beschäftigt habe. Leider habe ich von JS nicht wirklich einen Plan und muss jedes mal wieder neu reinkommen.

Habe mir jetzt mal folgendes Beispielskript gebastelt:

function searchSelectBox(form_name, form_element, search_value)
{
 //alert("Juhu!!!");
 //alert(document.searchform.users.options.length);

look_for = "Peter Gehtsgut";
 regx = /search_value/gi;

result = look_for.match(regx);

alert(result);

for(i = 0; i < document.searchform.users.options.length; i++)
 {
  alert(document.searchform.users[i].value);
 }

}
</script>

<form name="searchform" action="" method="post">
  <p>
    <select name="users" size="10" multiple>
      <option value="1">Max Mustermann</option>
      <option value="2">Mona Mustermann</option>
      <option value="3">Peter Gehtsgut</option>
      <option value="4">Sabine Sauerzapfe</option>
      <option value="5">Harald Schmidt</option>
      <option value="6">Robert Enke</option>
      <option value="7">Jarzi Barzi</option>
    </select>
  </p>
  <p>
    <input name="search_value" type="text" id="search_value">
    <input type="submit" name="Submit" value="Go!" onClick="searchSelectBox('searchform', 'users', 'gut')">
  </p>
</form>

Nun hierzu ein paar konkrete Fragen:

• Wie durchläuft man mit Javascript mit einer for-in-Schleife eine Selectbox?
• Wie greift man mit JS auf die "Elementbezeichnung" eines Option-Elements zu, also nicht auf den Wert?
• Ist match() die richtige Funktion, um quasi eine LIKE-Suche in einem String durchzuführen?`
• Wie wende ich match() auf einen variablen Suchbegriff an, den ich per Funktionsvariable übergeben möchte?
• Wie können per JS Elemente aus einer Selektbox entfernt werden?

Für Antworten und Hilfe wäre ich sehr dankbar.

Viele Grüße

Timo

[Siechfred]

Tag Timo.

• Wie durchläuft man mit Javascript mit einer for-in-Schleife eine Selectbox?

Kombiniere das options-Objekt mit einer for-Schleife. Die Anzahl der einzelnen Optionen verrät dir die Eigenschaft length.

• Wie greift man mit JS auf die "Elementbezeichnung" eines Option-Elements zu, also nicht auf den Wert?

Entweder mit Hilfe des node-Objektes (die "Beschriftung" ist ein simpler Textknoten) oder etwas einfacher mit Hilfe von innerHTML.

• Ist match() die richtige Funktion, um quasi eine LIKE-Suche in einem String durchzuführen?

Die Frage ist eher, ob du wirklich einen RegExp benötigst, oder ob dir http://de.selfhtml.org/javascript/objekte/string.htm#index_of=indexOf möglicherweise bessere Dienste leistet.

• Wie wende ich match() auf einen variablen Suchbegriff an, den ich per Funktionsvariable übergeben möchte?

Indem du den Suchbegriff zu einem gültigen RegExp-Muster zusammenbaust. Eine Variante wäre die Verwendung des RegExp-Objektes, siehe auch Archiv.

• Wie können per JS Elemente aus einer Selektbox entfernt werden?

Siehe Elemente aus einer Auswahlliste löschen.

Siechfred

[Siechfred]

Linkkorrektur:

Die Frage ist eher, ob du wirklich einen RegExp benötigst, oder ob dir indexOf möglicherweise bessere Dienste leistet.

Siechfred

[Timo]

Hallo Siechfred,

zunächst einmal vielen Dank für Deine Antwort. Ich bin jetzt schon ein bisschen weiter gekommen - leider sind aber auch wieder neue Schwierigkeiten aufgetreten.

Kombiniere das options-Objekt mit einer for-Schleife. Die Anzahl der einzelnen Optionen verrät dir die Eigenschaft length.

Ok - hab ich gemacht und funktioniert. Dachte nur, dass eine for-in-Schleife schöner wäre. Geht das mit einer for-in-Schleife gar nicht?

Entweder mit Hilfe des node-Objektes (die "Beschriftung" ist ein simpler Textknoten) oder etwas einfacher mit Hilfe von innerHTML.

Klappt beides - besten dank. Ist die Ansprache über das Node-Objekt mit document.searchform.users[i].childNodes[0].nodeValue denn richtig oder gibt es da noch eine elegantere Lösung?

Die Frage ist eher, ob du wirklich einen RegExp benötigst, oder ob dir http://de.selfhtml.org/javascript/objekte/string.htm#index_of=indexOf möglicherweise bessere Dienste leistet.

Prinzipiell reicht mir indexOf(). Leider wird hier wohl zwischen Groß- und Kleinschreibung unterschieden. Dies habe ich jetzt mit einem toLowerCase() umgangen.

Siehe Elemente aus einer Auswahlliste löschen.

Auch das entfernen der Objekte klappt jetzt. Leider sind nach dem Durchlaufen der Schleife aber wieder alle Elemente in der Selectbox. Mache ich beim Löschen noch etwas falsch?

Und noch eine Frage zu einer anderen Erweiterung: Besteht irgendwie die Möglichkeit, durch den Klick auf einen anderen Button die gelöschten Elemente wiederherzustellen, um die Selectbox wieder in den Ursprungszustand zu versetzen?

Anbei nochmal mein aktueller Code:

<script language="JavaScript">
function searchSelectBox(form_name, form_element, search_value)
{
 for(i = 0; i < document.searchform.users.options.length; i++)
 {
  alert(document.searchform.users[i].value);   alert(document.searchform.users[i].childNodes[0].nodeValue);

var look_for = document.searchform.users[i].childNodes[0].nodeValue.toLowerCase();
  var result = look_for.indexOf(search_value.toLowerCase());

alert(result);

if(result == -1)
  {
   document.searchform.users.options[i] = null;
   i--;
  }
 }
}
</script>

<form name="searchform" action="" method="post">
  <p>
    <select name="users" size="10" multiple>
      <option value="1">Max Mustermann</option>
      <option value="2">Mona Mustermann</option>
      <option value="3">Peter Gehtsgut</option>
      <option value="4">Sabine Sauerzapfe</option>
      <option value="5">Harald Schmidt</option>
      <option value="6">Robert Enke</option>
      <option value="7">Jarzi Barzi</option>
    </select>
  </p>
  <p>
    <input name="search_value" type="text" id="search_value">
    <input type="submit" name="Submit" value="Go!" onClick="searchSelectBox('searchform', 'users', 'Mann')">
  </p>
</form>

Nochmals vielen Dank für die Hilfe.

MfG

Timo

[Siechfred]

Tag Timo.

Ist die Ansprache über das Node-Objekt mit document.searchform.users[i].childNodes[0].nodeValue denn richtig oder gibt es da noch eine elegantere Lösung?

Möglich wäre auch data.

Auch das entfernen der Objekte klappt jetzt. Leider sind nach dem Durchlaufen der Schleife aber wieder alle Elemente in der Selectbox. Mache ich beim Löschen noch etwas falsch?

Ja, du verhinderst nicht, dass das Formular abgesandt wird.

Und noch eine Frage zu einer anderen Erweiterung: Besteht irgendwie die Möglichkeit, durch den Klick auf einen anderen Button die gelöschten Elemente wiederherzustellen, um die Selectbox wieder in den Ursprungszustand zu versetzen?

Das wird sie automatisch, wenn das Formular versandt wird. Ansonsten speichere die ursprünglichen Einträge in einem Array.

Siechfred

[Timo]

Hallo Siechfred,

nochmal danke für Deine Antwort. Wir nähern uns der Zielgeraden - aber eine kleine Frage habe ich noch ;-)

Das wird sie automatisch, wenn das Formular versandt wird. Ansonsten speichere die ursprünglichen Einträge in einem Array.

Ich habe nun versucht, den Inhalt der Selectbox in einem (globalen) Array zu speichern:

// Array mit Originalinhalt der Selectbox wird erstellt
save_value = new Array();
save_value = document.searchform.users;

Zudem habe ich eine Hilfsfunktion testIt() erstellt, um die Länge von save_value zu überprüfen. Nun ist es leider so, dass mit dem Entfernen eines Elements aus der Selectbox auf die Länge des Arrays um eins abnimmt. Woran liegt das? In der Schleife werden die Elemente doch nur aus der Selectbox gelöscht?

Hier noch einmal der komplette Quellcode:

<script language="JavaScript">
function searchSelectBox(form_name, form_element, search_value, do_reset)
{
 search_value = document.searchform.search_value.value;

// Array mit Originalinhalt der Selectbox wird erstellt
 save_value = new Array();
 save_value = document.searchform.users;

testIt();

if(do_reset == false)
 {
  for(i = 0; i < document.searchform.users.options.length; i++)
  {
   var look_for = document.searchform.users[i].firstChild.data.toLowerCase();
   var result = look_for.indexOf(search_value.toLowerCase());

if(result == -1)
   {
    document.searchform.users.options[i] = null;
    i--;
   }

testIt();
  }
 }
 else
 {
  alert("else!");

for(i = 0; i < save_value.length; i++)
  {
   alert(save_value[i].value);

document.searchform.users[i] = save_value[i];
  }
 }

testIt();
}

function testIt()
{
 alert("testIt()-Länge: "+save_value.length);
}
</script>

<form name="searchform" action="" method="post">
  <p>
    <select name="users" size="10" multiple>
      <option value="1">Max Mustermann</option>
      <option value="2">Mona Mustermann</option>
      <option value="3">Peter Gehtsgut</option>
      <option value="4">Sabine Sauerzapfe</option>
      <option value="5">Harald Schmidt</option>
      <option value="6">Robert Enke</option>
      <option value="7">Jarzi Barzi</option>
    </select>
  </p>
  <p>
    <input name="search_value" type="text" id="search_value">
    <input type="submit" name="Submit" value="Go!" onClick="searchSelectBox('searchform', 'users', 'Mann')">
  </p>
  <p><a href="#" onClick="searchSelectBox('searchform', 'users', false, false)">Los</a> / <a href="#" onClick="testIt()">Zur&uuml;ck</a></p>
</form>

MfG

Timo

[Siechfred]

Tag Timo.

Ich habe nun versucht, den Inhalt der Selectbox in einem (globalen) Array zu speichern:

Du hast die Array-Definition innerhalb der Funktion untergebracht, deshalb wird sie bei *jedem* Funktionsaufruf ausgeführt, was zu dem von dir beschriebenen Verhalten führen muss.

<script language="JavaScript">

Übrigens: type="text/javascript" fehlt.

// Array mit Originalinhalt der Selectbox wird erstellt
save_value = new Array();
save_value = document.searchform.users;

Lagere diesen Teil in eine eigene Funktion aus, die du onload und damit einmalig nach erfolgtem Laden des Dokumentes aufrufst.

Siechfred

[Timo]

Hallo Siechfred,

Du hast die Array-Definition innerhalb der Funktion untergebracht, deshalb wird sie bei *jedem* Funktionsaufruf ausgeführt, was zu dem von dir beschriebenen Verhalten führen muss.

Lagere diesen Teil in eine eigene Funktion aus, die du onload und damit einmalig nach erfolgtem Laden des Dokumentes aufrufst.

Das habe ich auch schon probiert - leider ohne Änderung. Auch bei einer onLoad-Initialisierung wird die Länge falsch ausgegeben. Hier nochmal der Code mit dem onLoad-Konstrukt:

<script language="JavaScript" type="text/javascript" >

function doOnLoad()
{
 // Array mit Originalinhalt der Selectbox wird erstellt
 save_value = new Array();
 save_value = document.searchform.users;
}

function searchSelectBox(form_name, form_element, search_value, do_reset)
{
 search_value = document.searchform.search_value.value;

testIt();

if(do_reset == false)
 {
  for(i = 0; i < document.searchform.users.options.length; i++)
  {
   var look_for = document.searchform.users[i].firstChild.data.toLowerCase();
   var result = look_for.indexOf(search_value.toLowerCase());

if(result == -1)
   {
    document.searchform.users.options[i] = null;
    i--;
   }

testIt();
  }
 }
 else
 {
  alert("else!");

for(i = 0; i < save_value.length; i++)
  {
   alert(save_value[i].value);

document.searchform.users[i] = save_value[i];
  }
 }

testIt();
}

function testIt()
{
 alert("testIt()-Länge: "+save_value.length);
}
</script>

<body onLoad="doOnLoad()">
<form name="searchform" action="" method="post">
  <p>
    <select name="users" size="10" multiple>
      <option value="1">Max Mustermann</option>
      <option value="2">Mona Mustermann</option>
      <option value="3">Peter Gehtsgut</option>
      <option value="4">Sabine Sauerzapfe</option>
      <option value="5">Harald Schmidt</option>
      <option value="6">Robert Enke</option>
      <option value="7">Jarzi Barzi</option>
    </select>
  </p>
  <p>
    <input name="search_value" type="text" id="search_value">
    <input type="submit" name="Submit" value="Go!" onClick="searchSelectBox('searchform', 'users', 'Mann')">
  </p>
  <p><a href="#" onClick="searchSelectBox('searchform', 'users', false, false)">Los</a> / <a href="#" onClick="testIt()">Zur&uuml;ck</a></p>
  </form>
</body>

MfG

Timo

[Struppi]

Ich hatte dir ja schon ein funktionierendes Beispiel gezeigt.

Das habe ich auch schon probiert - leider ohne Änderung. Auch bei einer onLoad-Initialisierung wird die Länge falsch ausgegeben. Hier nochmal der Code mit dem onLoad-Konstrukt:

<script language="JavaScript" type="text/javascript" >

function doOnLoad()
{
// Array mit Originalinhalt der Selectbox wird erstellt
save_value = new Array();
save_value = document.searchform.users;
}

Bei mir sieht die Funktion so aus:
function getDefaultList()
{
   var d = document;
   for(var y = 0; y < d.forms.length; y++)
   {
         for(var x = 0; x < d.forms[y].elements.length; x++)
         {
              if(d.forms[y].elements[x].type.indexOf('select') == -1) continue;

var list = d.forms[y].elements[x];
              list.defaultList = new Array();
              var l = list.length - 1;
              for(var i = l; i >= 0; i--) list.defaultList[i] = list[i];

list.selecter = selecter;
              list.onkeydown = selecter;
              list.wert = '';
         }
   }
}

desweiteren, musst du dir jeweils merken welche Buchstaben eingetippt wurden und bei jedem neuen Buchstaben erst die aktuelle Liste löschen und aus der defaultList die Einträge holen die mit dem Tastendruck übereinstimmen.

Struppi.

[Struppi]

Ist die Ansprache über das Node-Objekt mit document.searchform.users[i].childNodes[0].nodeValue denn richtig oder gibt es da noch eine elegantere Lösung?

Möglich wäre auch data.

oder direkt http://de.selfhtml.org/javascript/objekte/options.htm#text

Struppi.

[Siechfred]

Tag Struppi.

oder direkt http://de.selfhtml.org/javascript/objekte/options.htm#text

Diese Möglichkeit kenne ich zwar, mir ist aber irgendwie in Erinnerung, dass es da unter Umständen zu Problemen kommen könnte. Kannst du das bestätigen?

Siechfred

[Struppi]

oder direkt http://de.selfhtml.org/javascript/objekte/options.htm#text

Diese Möglichkeit kenne ich zwar, mir ist aber irgendwie in Erinnerung, dass es da unter Umständen zu Problemen kommen könnte. Kannst du das bestätigen?

Ich hab auch irgendwas in Erinnerung, aber entweder ging's da nicht um's lesen des Wertes oder es betrifft den IE 3, ansonsten hat ich noch nie Probleme mit [].options[...].text

Aber der OP hat es sowieso ignoriert.

Struppi.

[Struppi]

Wenn in der Selektbox z.B. "Max Mustermann" und "Mona Mustermann" eingegeben wird, soll nach Eingabe von "Max" im Suchfeld nur noch der Wert "Max Mustermann" in der Selektbox gezeigt werden. Gibt es ein solches Konstrukt oder ist das nicht möglich?

Du meinst sowas: http://jstruebig.de/web/javascript/source/optionliste.html

Struppi.