typeahead initial suggestions work. but little cleanup needed, and add to tags

javascript/src/TypeAhead.js

@@ -214,7 +214,7 @@ var QfqNS = QfqNS || {};
             });
         }
 
-        // add typahead
+        // add typeahead
         $inputField.typeahead.apply($inputField, typeaheadConfig);
 
         // directly add tag when clicked on in typahead menu
@@ -255,6 +255,10 @@ var QfqNS = QfqNS || {};
         var staticList = $element.data('typeahead-tag-static-list');
         staticList = staticList !== undefined && staticList !== '' ? staticList : [];
 
+        // get initial suggestions
+        var initialSuggestions = $element.data('typeahead-initial-suggestion');
+        initialSuggestions = initialSuggestions !== undefined && initialSuggestions !== '' ? initialSuggestions : [];
+
         // get key from field value and fetch value from staticList (and later from API if SIP given)
         var filledFromStaticList = n.TypeAhead.fillTypeAheadFromShadowElementStaticList($element, staticList);
 
@@ -280,7 +284,7 @@ var QfqNS = QfqNS || {};
             {
                 name: 'staticList',
                 display: 'value',
-                source: n.TypeAhead.substringMatcher(staticList),
+                source: n.TypeAhead.substringMatcher(staticList, initialSuggestions),
                 limit: n.TypeAhead.getLimit($element),
                 templates: {
                     // header: '<h3 class="league-name">List</h3>',
@@ -391,15 +395,15 @@ var QfqNS = QfqNS || {};
         }
     };
 
-    n.TypeAhead.substringMatcher = function(tags) {
-        return function findMatches(q, cb) {
-            var matches, substringRegex;
-
+    n.TypeAhead.substringMatcher = function(tags, initialSuggestions) {
+        return function findMatches(query, sync) {
+            if (query === '') {
+                sync(initialSuggestions);
+            } else {
                 // an array that will be populated with substring matches
-            matches = [];
-
+                var matches = [];
                 // regex used to determine if a string contains the substring `q`
-            var substrRegex = new RegExp(q, 'i');
+                var substrRegex = new RegExp(query, 'i');
 
                 // iterate through the pool of strings and for any string that
                 // contains the substring `q`, add it to the `matches` array
@@ -408,8 +412,8 @@ var QfqNS = QfqNS || {};
                         matches.push(tag);
                     }
                 });
-
-            cb(matches);
+                sync(matches);
+            }
         };
     };
 
@@ -448,7 +452,11 @@ var QfqNS = QfqNS || {};
     };
 
     n.TypeAhead.getMinLength = function ($element) {
+        if ($element.data('typeahead-initial-suggestion') !== undefined) {
+            return 0;
+        } else {
             return $element.data('typeahead-minlength') || 2;
+        }
     };
 
     n.TypeAhead.getHighlight = function ($element) {

mockup/typeahead.php

@@ -93,6 +93,18 @@
 
     $staticListSafeJson = htmlentities(json_encode($staticList), ENT_QUOTES, 'UTF-8');
 
+    $initialSuggestions = [
+        ['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">
@@ -106,6 +118,7 @@
                 <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-tag-static-list="<?php echo $staticListSafeJson; ?>"
+                       data-typeahead-initial-suggestion="<?php echo $initialSuggestionsSafeJson; ?>"
                 >
             </div>