Linuchs: input type search: Tags <b></b> der Ajax-Ergebnisse werden nicht beachtet

Moin,

ich habe die Datalist Vögel als Vorbild genommen, um Suchergebnisse anzuzeigen, die nach jedem eingegebenem Buchstaben per Ajax vom Server geholt werden.

Das klappt soweit, aber der eingegebene Suchbegriff wird nicht fett dargestellt:

Suchfeld

Wie kann ich die Zeichen einfetten?

Zusatzfrage: Die angezeigten Ergebnisse kommen aus DB-Tabellen und haben eine id. Die würde ich gerne beim Absenden des Suchfeldes an den Server senden, denn die gezeigten Texte (z.B. Marktplatz in Dorf A und Dorf B) sind oft nicht eindeutig. Es kommt noch 12345 Adorf davor.

Wie könnte das gehen?

Gruß, Linuchs

  1. Hallo,

    ich habe die Datalist Vögel als Vorbild genommen, um Suchergebnisse anzuzeigen, die nach jedem eingegebenem Buchstaben per Ajax vom Server geholt werden.

    Das klappt soweit, aber der eingegebene Suchbegriff wird nicht fett dargestellt

    das hätte mich auch gewundert. ;-)

    Suchfeld

    Wie kann ich die Zeichen einfetten?

    Mit diesem Ansatz: Gar nicht. Die option-Elemente enthalten nur reinen Text, kein HTML.

    Ciao,
     Martin

    --
    Kunst beginnt da, wo bei den meisten das Können aufhört.
    1. Hallo Martin,

      Mit diesem Ansatz: Gar nicht. Die option-Elemente enthalten nur reinen Text, kein HTML.

      Goggle macht es vor:

      Goggel

      Element untersuchen:

      Goggel

      Da wird der Browser wohl mit den unzähligen verschachtelten divs aus dem Konzept gebracht und macht das doch ;-)

      Linuchs

      1. Hallo,

        Goggle macht es vor:

        Div-Suppe, mit Spänen gewürzt…

        der Browser [...] macht das doch ;-)

        weit und breit kein Option-Element

        Gruß
        Kalk

      2. Hallo,

        Mit diesem Ansatz: Gar nicht. Die option-Elemente enthalten nur reinen Text, kein HTML.

        Goggle macht es vor:

        Goggel

        Element untersuchen:

        Goggel

        Da wird der Browser wohl mit den unzähligen verschachtelten divs aus dem Konzept gebracht und macht das doch ;-)

        siehst du da ein datalist- oder ein option-Element? Ich nicht.
        Die bauen das mit HTML und Javascript komplett selbst. The hard way.

        So long,
         Martin

        --
        Kunst beginnt da, wo bei den meisten das Können aufhört.
        1. Die bauen das mit HTML und Javascript komplett selbst. The hard way.

          Habe ich bisher auch gemacht, da komme ich aber mit [Pfeil runter] nicht in die Vorschläge. Und Tasten abfragen gibt vermutlich wieder Probleme bei den tastenlosen Geräten.

          1. Hallo Linuchs,

            bei tastenlosen Geräten kommst Du nicht in Verlegenheit, mit Arrow-Down in die Liste einzusteigen. Da machst Du einen Finger-Down und touchst die gewünschte Stelle. Das Problem dürfte bei Touch eher sein, dass ein handgemachtes Control nicht vom Gerät unterstützt wird und Du das dann selbst behandeln musst. Ich weiß grad nicht wie ein Androide oder iOSe eine Datalist anzeigt, aber bei einem Select gibt's auf jeden Fall ein spezielles Fullscreen-UI.

            Bei tastenhaltigen Geräten musst Du ggf. darauf achten, dass es einen Dummbrowser gibt, bei dem in den Namen der Pfeiltasten das "Arrow" fehlt. Also "Up", "Down", "Left" und "Right" statt "ArrowUp" etc. Wer ist es wohl? Der „gute“ alte IE natürlich.

            Rolf

            --
            sumpsi - posui - clusi
  2. Die angezeigten Ergebnisse kommen aus DB-Tabellen und haben eine id. Die würde ich gerne beim Absenden des Suchfeldes an den Server senden,

    Dazu muss die id in das jeweilige <option>-Feld der <datalist>.

    MFG

    1. Hi,

      Die angezeigten Ergebnisse kommen aus DB-Tabellen und haben eine id. Die würde ich gerne beim Absenden des Suchfeldes an den Server senden,

      Dazu muss die id in das jeweilige <option>-Feld der <datalist>.

      ... was zur Folge hat, dass sie auch mit angezeigt wird.

      So long,
       Martin

      --
      Kunst beginnt da, wo bei den meisten das Können aufhört.
      1. Hallo,

        Dazu muss die id in das jeweilige <option>-Feld der <datalist>.

        ... was zur Folge hat, dass sie auch mit angezeigt wird.

        nicht wenn die Id im Value-Attribut steht und der anzuzeigende Text zwischen den Option-Tags. Oder übersehe ich was?

        Gruß
        Kalk

        1. Hallo Kalk,

          nicht wenn die Id im Value-Attribut steht und der anzuzeigende Text zwischen den Option-Tags. Oder übersehe ich was?

          Auf die Idee bin ich auch grad gekommen, habe die lfd. Nr. als Value genommen:

          Suche

          Vorschlag <b>Markt</b>platz wird angezeigt und bei Klick darauf der eingegebene Suchbegriff durch die Ziffer 1 im input-Feld ersetzt. Verwirrt den Leser natürlich

          Linuchs

          1. Komisch, nun schreibe ich den gefundenen Ort (mit Markierungs-Tag) ins value und die Vorschläge zwischen <option></option> werden trotz Markierungs-Tag ohne diesen Tag angezeigt, er wird ignoriert.

            Nach Klick erscheint der value Wert mit Markierungs-Tag im Eingabefeld.

            Such

            1. Bei Klick auf einen Vorschlag ist die datalist sofort leer, bevor noch der onclick ausgeführt wird. Womöglich ein / mehrere input hidden zu füllen, mißlingt leider:

              Such

    2. Die angezeigten Ergebnisse kommen aus DB-Tabellen und haben eine id. Die würde ich gerne beim Absenden des Suchfeldes an den Server senden,

      Dazu muss die id in das jeweilige <option>-Feld der <datalist>.

      Z.B. als id-Attribute.

      MfG

  3. @@Linuchs

    Suchfeld

    Statt des b-Elements ist hier das mark-Element angebracht.

    <mark>markt</mark>no pun intended.

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling