QFQ

Habe den code von hier ( https://maxfavilli.com/jquery-tag-manager ) in das neue File javascript/src/Helper/tagManager.js kopiert und ein paar Bugs bzw. Lint Fehler behoben.

Der TagManager wird von TypeAhead.js aufgerufen. Ich habe möglichst nichts an dem Code vom tagManager.js geändert und stattdessen dessen API benutzt. Es wäre sauberer den tagManager.js raus zu schmeissen und selber zu implementieren. Doch die bestehende Lösung funktioniert.

Mockup: Die Tag Felder Mockups befinden sich in mockup/typahead.php

API: Da die Tag Felder Typahead integrieren, sind die Attribute von QFQ-Typahead auch hier anwendbar. neu dazu kommen:

data-typeahead-tags="true"                 # tags Feld aktivieren
data-typeahead-pedantic="true"             # nur tags die vom Typahead vorgeschlagen werden, sind erlaubt
data-typeahead-tag-delimiters="[9, 44]"    # Ascii code der Tasten die man drücken kann, um einen Tag abzuschliessen. (Form submit mit Enter ist in diesem Feld deaktiviert)
value="<?php echo $tagsSafeJson; ?>"       # Json encodierte tags die schon gesetzt wurden. JSON: [{value: "Alaska", key: "AK"}, {value: "Alabama", key: "AL"}]
                                           # falls man keine Keys brauch, einfach die den key gleich wie value setzen

Post data: Json encodierter String von der Form:

[{value: "Alaska", key: "AK"}, {value: "Alabama", key: "AL"}]

Typeahead: Das Tag feld ruft die Typeahead API exakt gleich auf wie die bestehenden Typeahead Felder.

QFQ Keywords:

typeAheadTag=0|1
typeAheadTagDelimiter=9,44 (TAB, COMMA)