suggestions from both api and static work. now only Api

javascript/src/TypeAhead.js

@@ -93,8 +93,14 @@ var QfqNS = QfqNS || {};
         // expected JSON format: [{value: "Alaska", key: "AK"}, {value: "Alabama", key: "AL"}]
         var existingTags = $element.val() !== '' ? JSON.parse($element.val()) : [];
 
+        // static list of tags
+        var staticList = $element.data('typeahead-tag-static-list');
+        staticList = staticList !== undefined && staticList !== '' ? staticList : [];
+
         // list of current typeahead suggestions
         var typeaheadList = existingTags.slice();
+        var typeaheadListApi = [];
+        var typeaheadListStatic = [];
 
         // get list of possible keys a user can press to push a tag (list of keycodes)
         var delimiters = $element.data('typeahead-tag-delimiters');
@@ -160,29 +166,12 @@ var QfqNS = QfqNS || {};
                 minLength: n.TypeAhead.getMinLength($element)
             },
             {
+                name: 'staticList',
                 display: 'value',
-                source: suggestions,
-                limit: n.TypeAhead.getLimit($element),
-                templates: {
-                    header: '<h3 class="league-name">API</h3>',
-                    suggestion: function (obj) {
-                        return "<div>" + n.TypeAhead.htmlEncode(obj.value) + "</div>";
-                    },
-                    // No message if field is not set to pedantic.
-                    notFound: (function ($_) {
-                        return function (obj) {
-                            if (!!$element.data('typeahead-pedantic') && typeaheadList.length === 0)
-                                return "<div>'" + n.TypeAhead.htmlEncode(obj.query) + "' not found" + JSON.stringify(typeaheadList);
-                        };
-                    })($inputField)
-                }
-            },
-            {
-                display: 'value',
-                source: n.TypeAhead.substringMatcher(['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']), // suggestions,
+                source: n.TypeAhead.substringMatcher(staticList),
                 limit: n.TypeAhead.getLimit($element),
                 templates: {
-                    header: '<h3 class="league-name">List</h3>',
+                    // header: '<h3 class="league-name">List</h3>',
                     suggestion: function (obj) {
                         return "<div>" + n.TypeAhead.htmlEncode(obj.value) + "</div>";
                     }// ,
@@ -194,6 +183,25 @@ var QfqNS = QfqNS || {};
                     //     };
                     // })($inputField)
                 }
+            },
+            {
+                name: 'restApi',
+                display: 'value',
+                source: suggestions,
+                limit: n.TypeAhead.getLimit($element),
+                templates: {
+                    // header: '<h3 class="league-name">API</h3>',
+                    suggestion: function (obj) {
+                        return "<div>" + n.TypeAhead.htmlEncode(obj.value) + "</div>";
+                    },
+                    // No message if field is not set to pedantic.
+                    notFound: (function ($_) {
+                        return function (obj) {
+                            if (!!$element.data('typeahead-pedantic') && typeaheadList.length === 0)
+                                return "<div>'" + n.TypeAhead.htmlEncode(obj.query) + "' not found";
+                        };
+                    })($inputField)
+                }
             });
 
         // directly add tag when clicked on in typahead menu
@@ -202,9 +210,17 @@ var QfqNS = QfqNS || {};
         });
 
         // update typahead list when typahead changes
-        $inputField.bind('typeahead:render', function (event, sugg) {
+        $inputField.bind('typeahead:render', function (event, sugg, asynch, datasetName) {
+            if (datasetName === 'restApi') {
+                typeaheadListApi.length = 0;
+                typeaheadListApi.push.apply(typeaheadListApi, sugg);
+            } else if (datasetName === 'staticList') {
+                typeaheadListStatic.length = 0;
+                typeaheadListStatic.push.apply(typeaheadListStatic, sugg);
+            }
             typeaheadList.length = 0;
-            typeaheadList.push.apply(typeaheadList, sugg);
+            typeaheadList.push.apply(typeaheadList, typeaheadListApi);
+            typeaheadList.push.apply(typeaheadList, typeaheadListStatic);
         });
     };
 
@@ -306,7 +322,7 @@ var QfqNS = QfqNS || {};
         }
     };
 
-    n.TypeAhead.substringMatcher = function(strs) {
+    n.TypeAhead.substringMatcher = function(tags) {
         return function findMatches(q, cb) {
             var matches, substringRegex;
 
@@ -318,9 +334,9 @@ var QfqNS = QfqNS || {};
 
             // iterate through the pool of strings and for any string that
             // contains the substring `q`, add it to the `matches` array
-            $.each(strs, function(i, str) {
-                if (substrRegex.test(str)) {
-                    matches.push({key: str, value: str});
+            $.each(tags, function(i, tag) {
+                if (substrRegex.test(tag.value)) {
+                    matches.push(tag);
                 }
             });
 

mockup/typeahead.php

@@ -133,6 +133,18 @@
 
         $tagsSafeJson = htmlentities(json_encode($tags), ENT_QUOTES, 'UTF-8');
 
+        $staticTags = [
+            ['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"],
+        ];
+
+        $staticTagsSafeJson = htmlentities(json_encode($staticTags), ENT_QUOTES, 'UTF-8');
+
         ?>
 
         <div id="formgroup4" class="form-group">
@@ -148,6 +160,7 @@
 
                        data-typeahead-tags="true"
                        data-typeahead-tag-delimiters="[9, 13]"
+                       data-typeahead-tag-static-list="<?php echo $staticTagsSafeJson; ?>"
                        value="<?php echo $tagsSafeJson; ?>"
                        >
             </div>
@@ -168,6 +181,7 @@
                        data-typeahead-tags="true"
                        data-typeahead-pedantic="true"
                        data-typeahead-tag-delimiters="[9, 44]"
+                       data-typeahead-tag-static-list="<?php echo $staticTagsSafeJson; ?>"
                        value="<?php echo $tagsSafeJson; ?>"
                 >
             </div>