Select2 Übergabe Platzhalter Werte

Question

Ich habe riesige Drop-Down-Liste mit Postnummern. Da es mit der normalen Drop-Down-Liste ziemlich schwierig ist, es herunter zu scrollen, kam ich auf die Idee, Select2 jQuery (Version 4) Drop-Down zu implementieren (da es auch eine Suchfunktion aus der Box bietet). Nun, aufgrund der Art und Größe der Liste, es dauert lange zu laden, so dass ich, obwohl ich einige Seitenumbruch verwenden konnte und die ursprüngliche Liste auf 50 Elemente begrenzen, und auf Bildlauf oder Suche, um es zu erweitern. Schließlich habe ich herausgefunden, dass die Paginierung für das Laden von Ajax reserviert ist (wenn ich die Dokumente richtig lese), was ich gerne vermeiden würde.

Meine aktuelle Option Gruppe sieht wie folgt aus

<option data-name="City Name" data-postal-number="11111">City Name [11111]</option> 

In Datenbank Ich bin Platzhalter data-name und data-postal-number in zwei Datenbankfelder (erforderlich nach Design) eingesetzt wird.

Ich habe es geschafft für die Initialisierung von Select2 folgenden JS zu erstellen, haben aber keine Ahnung, wie Platzhalter zu verwalten richtig in sie gesetzt, um es zu Datenbank senden (mit Codeigniter 3, aber Zweifel, das ist relevant für die Frage)

$.fn.select2.amd.require(
    ['select2/data/array', 'select2/utils'], 
    function (ArrayData, Utils) { 
     function CustomData($element, options) { 
      CustomData.__super__.constructor.call(this, $element, options); 
     } 

     function contains(str1, str2) { 
      return new RegExp(str2, "i").test(str1); 
     } 

     Utils.Extend(CustomData, ArrayData); 

     CustomData.prototype.query = function (params, callback) { 
      if (!("page" in params)) { 
       params.page = 1; 
      } 
      var pageSize = 50; 
      var results = this.$element.children().map(function(i, elem) { 
       if (contains(elem.innerText, params.term)) { 
        return { 
         id:[elem.innerText, i].join(""), 
         text:elem.innerText 
        }; 
       } 
      }); 
      callback({ 
       results:results.slice((params.page - 1) * pageSize, params.page * pageSize), 
       pagination:{ 
        more:results.length >= params.page * pageSize 
       } 
      }); 
     }; 

     $("#postal_number_selector").select2({ 
      ajax:{}, 
      allowClear:true, 
      width:"element", 
      dataAdapter:CustomData 
     }); 
    }); 

Jede Hilfe oder Informationen, wo über sie zu lesen ist mehr als geschätzt (möchte echte ajax/json Laden, wenn möglich ... vermeiden)

Vielen Dank im Voraus

Answer 1

statt HTML verwenden data-* Attri Versuchen Sie, HTML <option value="..."> zu verwenden.

Dann innerhalb des Werts, verketten Sie beide City Name und 11111, mit einigen Separator, zum Beispiel |||.

Danach können Sie extrahieren beide Werte serverseitigen (PHP oder ASP zum Beispiel mit - es hängt von Ihrer serverseitige Architektur), indem Sie den Wert von Option-Tag gesendet Aufspalten (<option value = "City Name|||11111">City Name [11111]</option>).

Dies ist, wie ich es in PHP-Server-Seite tun würde:

<?php 
$select_name = isset($_POST['select_name']) ? $_POST['select_name'] : ""; 
//Get the value(s) and extract them 
$select_value = explode("|||", $select_name); 

echo $select_value[0]; //This should contain "City Name" 
echo $select_value[1]; //This should contain "11111" 
?>