Inhalte einer Drowdown-Box nachladen

[Dragosius]

Hallo,

ich habe auf einer Seite diverse Dropdowns im Einsatz.
Je nach Konstellation können dort mehere tausend Einträge vorhanden sein.
Dadurch dauert das Laden der Seite teilweise ewig.

Gibt es eine Möglichkeit, hier Inhalte nachzuladen oder andere Lösungen, um hier nicht so starke Geschwindigkeitseinbußen zu haben?


Vielen Dank

 

[Sempervivum]

Hallo Dragosius,
das Problem tritt häufig auf und eine gängige Lösung besteht darin, es mit einer Suchfunktion zu verbinden: Erst wenn der Benutzer, sagen wir, 3 Zeichen eingegeben hat, werden die Daten mit Ajax vom Server geholt und zwar nur die passenden. Select2 unterstützt so etwas:
Getting Started | Select2 - The jQuery replacement for select boxes
Ajax (remote data) | Select2 - The jQuery replacement for select boxes
Wahrscheinlich geht es auch mit Selectize:
Selectize

For when you have thousands of options and want them provided by the server as the user types.

 

[Dragosius]

Danke für die Antwort.
Leider bin ich da nicht ganz so fit, daher habe ich da eine Rückfrage.
So wie ich das sehe, wird dort eine URL also Quelle hinterlegt.
Wie kann ich hier das Ergebnis einer Datenbankabfrage hinterlegen, welche dann durchsucht wird?

 

[Jan-Frederik Stieler]

Hi,
diese url die hinterlegt ist führt auf dem Server ein Script z.B mit Funktion aus welche sich die Daten holt und diese dann zurück gibt, meist in Form eines Json-Objektes.

 

[Dragosius]

Entschuldigung ür die späte Antwort, aber leider hat es vorher zeitlich nicht geklappt.

So wie ich das sehe, wäre das Folgende perfekt für mich geeignet:
Dropdown | Select2 - The jQuery replacement for select boxes
Da werden die Suchergebnisse nach bestimmten Kategorien aufgelistet.

Auf meiner Seite gibt es bei der Auswahlliste auch verschiedene Kategorien:

Die Kategorie selbst ist nicht auswählbar, genauso wie auf der Seite.

Aktuell frage ich dies über eine einzelne Datenbankabfrage ab und lasse da in HTML ein foreach drüberlaufen und dazwischen die Kategorien einfügen:

$userskarten = pdoQuery("SELECT `setname`, `nummer`,`status` FROM `gy_mitglieder_karten` WHERE `userID` = :userID AND `status` in('will','might') ORDER BY `status` desc,`setname`,`nummer`", [':userID'=>$userId])->fetchAll();

<select size="1" name="karteuser2" id="ich-kartenname2">
    <option> </option>
        <?php
        echo '<optgroup label="Will Trade">';
        $status = 'will';
        foreach($userskarten as $zaehler => $namescards) {
            if( $status != $namescards['status'] ) {
                echo '</optgroup><optgroup label="Might Trade">';
            }
            $src = kartenPfadAnzeigen($namescards['setname'], $namescards['nummer']);
            ?>
            <option data-src="<?php echo $src; ?>"><?php echo $namescards['setname'].$namescards['nummer']; ?></option>
            <?php
            $status = $namescards['status'];
        }
        echo '</optgroup>';
        ?>
</select>

Das Problem dabei ist nur, dass die Seite entsprechend lange braucht, die selectbox zu laden, wenn es zu viel wird.
Daher wäre die oben genannte Lösung perfekt für mich.
Nur wie kann ich die Datenbankabfrage dort nun einfügen.

Vielen Dank für die Hilfe.

 

[Sempervivum]

Das wird hier in der Doku beschrieben:
Ajax (remote data) | Select2 - The jQuery replacement for select boxes
Setzt jedoch voraus, dass Du die integrierte Ajax-Funktion von Select2 benutzt, wie am Anfang der Seite beschrieben.

 

[Sempervivum]

PS: Wie Du gruppierte Daten anlegen musst, wird hier beschrieben:
The Select2 data format | Select2 - The jQuery replacement for select boxes

 

[Dragosius]

Beim 1. Link habe ich leider nicht so viel verstanden.
Das ist leider relativ komplex, wenn man da nicht so in der Materie ist.

Im Header würde ich es dann einfach so einbinden?

<link rel="stylesheet" href="css/select2.min.css">
<script src="js/select2.min.js"></script>

Beim 2. Link steht ja, wie ich das Array aufbereiten muss.

In meinem Fall wäre das ja dann in etwa so:

{
  "results": [
    {
      "text": "Will Trade",
      "children" : [
        {
            "id": 1,
            "text": "name21"
        },
        {
            "id": 2,
            "text": "name22"
        }
      ]
    },
    {
      "text": "Might Trade",
      "children" : [
        {
            "id": 3,
            "text": "name11"
        },
        {
            "id": 4,
            "text": "name12"
        }
      ]
    }
  ],
  "pagination": {
    "more": true
  }
}

So wie ich das lese, ist die ID nur für Select2 relevant, das heißt, hier kann einfach forlaufend eine ID verwendet werden.
Wie kann ich das denn am performantesten aus meiner Abfrage generieren?

Die Spalten `setname` und `nummer` sind der komplette Name, wie auf dem Screnshot erkennbar, werden also einfach zusammen gesetzt.

 

[Sempervivum]

Das stimmt, wenn man mit dem Server interagieren muss wird es ein wenig komplizierter,
weil das nicht so stark vorbereitet werden kann. Aber es führt kein Weg daran vorbei wenn man sehr viele Datensätze hat.

So wie ich das lese, ist die ID nur für Select2 relevant, das heißt, hier kann einfach forlaufend eine ID verwendet werden.

Ja, denke ich auch. Aber dich hindert nichts daran, eine ID zu verwenden, die auch für dich nützlich ist, z. B. die ID aus der Datenbank, jedenfalls wenn alles aus einer Tabelle kommt und es eine eindeutige ID gibt.

Wie kann ich das denn am performantesten aus meiner Abfrage generieren?

Beim Durchlaufen der Datensätze aus der DB ein assoziatives Array erzeugen und mit json_encode in einen JSON-String umwandeln. Diesen dann mit echo ausgeben. Dabei ganz wichtig: Es darf nichts anderes als dieser String ausgeben werden weil sonst die Syntax des JSON zerstört wird.
Die Grundstruktur der Auswertung hast Du ja einschl. Gruppierung.

Einbinden passt, wie Du es gepostet hast.

Was den ersten Link betrifft, fang am besten am Anfang an. URL ist die von deinem Serverskript.