"datalist" mit Suchformular

  • Hallo Zusammen


    Früher habe ich meine einfachen Web Seiten mit Front Page und der Front Page Servererweiterung erstellt.

    Nachdem das nun eingestellt worden ist, muss ich mich um die Scripte und Codes selber kümmern.


    Hier im HTML-Seminar habe ich in den letzten Tagen schon viel dazu gelernt.

    Nun bin ich auf der Suche nach einem Sript, der die "datalist" mit einem Eingabe bzw Suchformular verbindet.


    Folgenden Script habe ich schon zusammen und funktioniert auch.

    Ist aber leider nicht sehr elegant.X(

    Besser wäre es doch, wenn das ausgewählte Ziel im Fenster erscheint und dann über den Button "Finden" der Link ausgelöst wird.:)


    Ich bin für jede Idee dankbar


    gil



    <script>

    function urlist(v)

    {

    // alert(v);

    document.getElementById('htm').innerHTML=v+'.htm';

    document.getElementById('htm').href=v+'.htm';

    }

    </script>


    <form action="#">

    <p>

    <label>


    <input type="search" list="Inhalt"

    placeholder="Suche"

    oninput="urlist(this.value);">

    <datalist id="Inhalt">

    <select>

    <option value="Fiat Ducato 230">

    <option value="Fiat Ducato 244">

    <option value="Fiat Ducato 250">

    <option value="Peugeot Boxer 230">

    <option value="Peugeot Boxer 244">

    <option value="Peugeot Boxer 250">

    <option value="Citroen Jumper 230">

    <option value="Citroen Jumper 244">

    <option value="Citroen Jumper 250">

    </select>

    </datalist>

    </label>

    <button>finden</button>

    </p>


    </form>

    <a>Treffer:</a>

    <a id="htm" href="" target="inhalt"></a>

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von gil ()

  • Besser wäre es doch, wenn das ausgewählte Ziel im Fenster erscheint und dann über den Button "Finden" der Link ausgelöst wird.:)

    Was meinst du mit Fenster?

    Also wenn ich was suche dann findet er was und beim klick drauf wird es ja in der dataliste angezeigt und unter der Liste der erzeugte Link.


    Soweit geht ja alles , nur verstehe ich deine gewüschte änderungen nicht

  • Hallo Bast 1012


    Vielen Dank für deine Nachricht.

    Die smartere Lösung wäre, wenn der ausgewählte Link in dem Suchfenster erscheint und dann über den Button " Finden " ausgelöst wird.

    Es geht ja nicht darum, dass wie bei einem normalen Suchfenster, mehrer Treffer angezeigt werden und man sich dann das entsprechende auswählt.

    Die Auswahl trifft man ja schon bei dem Aufklapp Menue.

  • Jetzt weiß ich aber immer noch nicht was du mit Suchfenster meinst ?

    Es gibt ja das textfeld wo du was rein schreibst. Dann die dataliste wo du was auswählst , und wenn du da was anklicken tust steht das wort im textfeld. Dann finden klicken und mit den wort ( oder Link ) weiter arbeiten.


    Das funktioniert ja jetzt schon alles.Deswegen komme ich mit dein Suchfenster nicht klar was du da meinst.


    Aber wenn du zb dein oninput in onchange änderst , würde ich es besser finden. ( meine meinung )

  • Hallo Basti 1012

    Ich schreibe ein paar Buchstaben ins Textfeld. Danach werden mir mit datalist ein paar Vorschläge auf Grund meiner Eingabe gemacht. Dann wähle ich ein Produkt aus. Dieses erscheint dann im Textfeld und noch dazu darunter als Link.

    Diesen kann ich dann mit einem Klick auslösen.

    Ich möchte mir den extra Link unter dem Textfeld ersparen und den ausgewählten Vorschlag direkt aus dem Textfeld mit dem Button "Finden" auslösen und die Seite anzeigen lassen.

    Wozu muss der Link noch einmal unter dem Textfeld erscheinen? (noch dazu mit ". htm"?

    Es gibt nicht mehrere Treffer und der Nutzer hat ja schon seine Wahl getroffen.

    Man könnte den Link unter dem Texfeld mit visibility: hidden unsichtbar machen aber der Button "Finden" sollte den Link dann auslösen.

    Das wäre für mich eine elegante Lösung!