...
 
Commits (13)
......@@ -41,12 +41,12 @@ call to `api/load.php` upon change.
## Typeahead
Typeahead capable text input elements will be defined by the following attributes:
### .class='qfq-typeahead'
### .data-typeahead-sip
The SIP will store:
The SIP will store:
Use with SQL: `typeAheadSql`
......@@ -56,24 +56,32 @@ Use with LDAP: `typeAheadLdap`
* `typeAheadLdapSearch`
* `typeAheadLdapValuePrintf`
* `typeAheadLdapKeyPrintf`
### .data-typeahead-limit
* Defines the limit of entries shown on the client. Default on client is 5. The server will always send a value.
* Defines the limit of entries shown on the client. Default on client is 5. The server will always send a value.
The server default is 20.
### .data-typeahead-minlength
* Defines the string minlength, typed by the user, before the first lookup is started. Default is 2.
### data-typeahead-pedantic
* If present, only suggested values are allowed in the input element
### .data-typeahead-static-list
* JSON encoded list of suggestions, which are served with the HTML input element.
* If both this list and the attribute `data-typeahead-sip` are given, then the typeahead
suggestions are taken from both sources.
* Expected JSON example:
`[{value: "Alaska", key: "AK"}, {value: "Alabama", key: "AL"}]`
## Tags Form Element
The tags form element depends on Typeahead by default. The following attributes define the tags form element, additional
The tags form element depends on Typeahead by default. The following attributes define the tags form element, additional
to the attributes for Typeahead (see above).
Mockups can be found in `mockup/typahead.php`
......@@ -88,10 +96,10 @@ Mockups can be found in `mockup/typahead.php`
### .value
* JSON encoded list of key value pairs of existing tags. e.g.
* JSON encoded list of key value pairs of existing tags. e.g.
`[{value: "Alaska", key: "AK"}, {value: "Alabama", key: "AL"}]`
### POST data
* JSON encoded list of key value pairs of the selected tags. e.g.
......
This diff is collapsed.
......@@ -79,6 +79,35 @@
</div>
<?php
$staticList = [
['value' => "duplicate", 'key' => "duplicate"],
['value' => "one", 'key' => "1"],
['value' => "two", 'key' => "2"],
['value' => "three", 'key' => "3"],
['value' => "four", 'key' => "4"],
['value' => "five", 'key' => "5"],
['value' => "six", 'key' => "6"],
['value' => "seven", 'key' => "7"],
];
$staticListSafeJson = htmlentities(json_encode($staticList), ENT_QUOTES, 'UTF-8');
$initialSuggestions = [
['value' => "duplicate", 'key' => "duplicate"],
['value' => "one2", 'key' => "1x"],
['value' => "two2", 'key' => "2x"],
['value' => "three2", 'key' => "3x"],
['value' => "four2", 'key' => "4x"],
['value' => "five2", 'key' => "5x"],
['value' => "six2", 'key' => "6x"],
['value' => "seven2", 'key' => "7x"],
];
$initialSuggestionsSafeJson = htmlentities(json_encode($initialSuggestions), ENT_QUOTES, 'UTF-8');
?>
<form id="myForm" class="form-horizontal" data-toggle="validator">
......@@ -89,7 +118,12 @@
<div class="col-md-6">
<input id="dropdown1" type="text" class="form-control qfq-typeahead" name="dropdown1"
data-typeahead-sip="abcde" data-typeahead-minlength="1" data-typeahead-limit="3">
data-typeahead-sip="abcde"
data-typeahead-minlength="1"
data-typeahead-limit="3"
data-typeahead-static-list="<?php echo $staticListSafeJson; ?>"
data-typeahead-initial-suggestion="<?php echo $initialSuggestionsSafeJson; ?>"
>
</div>
</div>
......@@ -102,7 +136,8 @@
<div class="col-md-6">
<input id="dropdown2" type="text" class="form-control qfq-typeahead" name="dropdown2"
data-typeahead-sip="abcdef" data-typeahead-limit="10" data-typeahead-minlength="1"
data-typeahead-pedantic="true" required>
data-typeahead-pedantic="true" required
data-typeahead-static-list="<?php echo $staticListSafeJson; ?>" >
</div>
<div class="col-md-4">
......@@ -141,13 +176,15 @@
</div>
<div class="col-md-6">
<input id="tags1" type="hidden" class="form-control qfq-typeahead" name="tags1"
<input id="tags1" type="hidden" class="form-control qfq-typeahead" name="tags1"
data-typeahead-sip="abcdef"
data-typeahead-limit="10"
data-typeahead-minlength="1"
data-typeahead-tags="true"
data-typeahead-tag-delimiters="[9, 13]"
data-typeahead-static-list="<?php echo $staticListSafeJson; ?>"
data-typeahead-initial-suggestion="<?php echo $initialSuggestionsSafeJson; ?>"
value="<?php echo $tagsSafeJson; ?>"
>
</div>
......@@ -160,7 +197,7 @@
</div>
<div class="col-md-6">
<input id="tags2" type="hidden" class="form-control qfq-typeahead" name="tags2"
<input id="tags2" type="hidden" class="form-control qfq-typeahead" name="tags2"
data-typeahead-sip="abcdef"
data-typeahead-limit="10"
data-typeahead-minlength="1"
......@@ -168,6 +205,8 @@
data-typeahead-tags="true"
data-typeahead-pedantic="true"
data-typeahead-tag-delimiters="[9, 44]"
data-typeahead-static-list="<?php echo $staticListSafeJson; ?>"
data-typeahead-initial-suggestion="<?php echo $initialSuggestionsSafeJson; ?>"
value="<?php echo $tagsSafeJson; ?>"
>
</div>
......