refs #10115 get suggestions from list an API works

javascript/src/TypeAhead.js

@@ -69,6 +69,9 @@ var QfqNS = QfqNS || {};
         });
         $element.after($inputField);
 
+        // hide original input
+        $element.detach().attr('type', 'hidden').insertAfter($inputField);
+
         // prevent form submit when enter key is pressed
         $inputField.off('keyup');
         $inputField.on('keypress keyup', function (e) {
@@ -144,23 +147,43 @@ var QfqNS = QfqNS || {};
                 hint: n.TypeAhead.getHint($element),
                 highlight: n.TypeAhead.getHighlight($element),
                 minLength: n.TypeAhead.getMinLength($element)
-            }, {
+            },
+            {
                 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'))
-                                return "<div>'" + n.TypeAhead.htmlEncode(obj.query) + "' not found";
+                            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,
+                limit: n.TypeAhead.getLimit($element),
+                templates: {
+                    header: '<h3 class="league-name">List</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'))
+                    //             return "<div>'" + n.TypeAhead.htmlEncode(obj.query) + "' not found";
+                    //     };
+                    // })($inputField)
+                }
+            });
 
         // directly add tag when clicked on in typahead menu
         $inputField.bind('typeahead:selected', function (event, sugg) {
@@ -272,6 +295,27 @@ var QfqNS = QfqNS || {};
         }
     };
 
+    n.TypeAhead.substringMatcher = function(strs) {
+        return function findMatches(q, cb) {
+            var matches, substringRegex;
+
+            // an array that will be populated with substring matches
+            matches = [];
+
+            // regex used to determine if a string contains the substring `q`
+            var substrRegex = new RegExp(q, 'i');
+
+            // 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});
+                }
+            });
+
+            cb(matches);
+        };
+    };
 
     n.TypeAhead.makePedanticHandler = function (bloodhound) {
         return function (event) {

mockup/typeahead.php

@@ -141,7 +141,7 @@
             </div>
 
             <div class="col-md-6">
-                <input id="tags1" type="hidden" class="form-control qfq-typeahead" name="tags1"
+                <input id="tags1" class="form-control qfq-typeahead" name="tags1"
                        data-typeahead-sip="abcdef"
                        data-typeahead-limit="10"
                        data-typeahead-minlength="1"
@@ -160,7 +160,7 @@
             </div>
 
             <div class="col-md-6">
-                <input id="tags2" type="hidden" class="form-control qfq-typeahead" name="tags2"
+                <input id="tags2" class="form-control qfq-typeahead" name="tags2"
                        data-typeahead-sip="abcdef"
                        data-typeahead-limit="10"
                        data-typeahead-minlength="1"