Commit 4c46f967 authored by Marc Egger's avatar Marc Egger

Merge branch 'marcTypeaheadInitialSuggestions' into F9517TagInput

parents 1d6abb6f 7ebd59f0
Pipeline #3340 passed with stages
in 3 minutes and 56 seconds
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment