Eine dropdown / select Auswahl erstellen mit Chosen

Mit dem jQuery Plugin chosen eine Benutzerfreundliche select Box erstellen.

In diesem Beispiel: Debian 8.11, PHP 5.6.39, jquery 3.2.1, chosen 1.8.7

Im Eingabefeld kann ein Suchbegriff eingegeben werden.

Screenshot:

Demo: jQuery Chosen Plugin

Download jQuery: Downloading jQuery

Download Chosen : https://github.com/harvesthq/chosen/releases

Die Plugins im php script laden (section):

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/chosen.jquery.min.js"></script>

sowie die css Stylesheets:

<link rel="stylesheet" type="text/css" href="/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/chosen.min.css" />

Das Plugin initialisieren:

<script type="text/javascript">
  $(document).ready(function () {
   $('.chosen-select').chosen({
   no_results_text: "Kein Eintrag gefunden!"
   });
  });
</script>

.chosen-select = select class im Abschnitt <select …>

Die Beschreibung der Optionen findet man hier: Chosen options

Der Quelltext (Auszug) der php Form:

Im Original als table, hier wegen der Übersicht ohne Table tags. Die Buttons haben eine eigene css class. (class=xxx) Selbst definieren oder einfach weglassen.

$supplier_options="";
echo "<center>";
  echo '<form name="add_suppl01" id="add_suppl01" method="post"  action="'.$_SERVER['PHP_SELF'].'">';

//---chosen

echo'<div>';
echo'<select data-placeholder="Lieferant ausw&auml;hlen..." style="width:380px;" tabindex="0" name="sel_supplier" id="sel_supplier">';
echo'<option value=""></option>';

echo 'option value="1007">Ikea Wallau::65719 Hofheim am Taunus::Am Wandersmann </option>';

     echo 'option value="1008">Segmüller::64331 Weiterstadt::Im Rödling 2</option>';

     echo 'option value="1009">Amazon.de::Internet::</option>';

  echo'</select>';
echo '</div>';  echo '';

   //---END: chosen

echo '<input type=hidden name="sfe" value="2">';
echo '<input type="submit" name="submit" value="Lieferant ausw&auml;hlen">';
echo '<button class="button08" type="submit" formaction="/index.php">Abbrechen</button>';
echo '</form>';

Die Auswahl wird in der POST-Variablen sel_supplier übergeben. In der Form mit id und name definiert.

Im nächsten Schritt wird dann diese Variable ausgewertet:

if ($sfe == "2"){

//---- get selected record -->sel_supplier

     $selectSupplier = isset($_POST['sel_supplier'])
      ? $_POST['sel_supplier']
      : array();

     echo 'DEBUG: Auswahl = :'.$selectSupplier;

.....

}

 

Gerade für längere Dropdowns ist diese Methode einfacher, da man im Eingabefeld bereits Suchbegriffe eingeben kann.