Adds creationText option to display a line in the results to indicate…

… it will create a new keyword
hlsolutions · Aug 6, 2013 · 643215d · 643215d
1 parent 44ca85e
commit 643215d
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 6 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -149,6 +149,36 @@
                 });
             }());
 
+            (function () {
+                var container = builder('Demo with static data, native Placeholder and creationText.', 'name', 'Name');
+                var form = container.find('form');
+                var input = container.find('input[type=text]');
+                var output = container.find('pre');
+
+                var data = [
+                    {value : "21", name : "Mick Jagger"},
+                    {value : "43", name : "Johnny Storm"},
+                    {value : "46", name : "Richard Hatch"},
+                    {value : "54", name : "Kelly Slater"},
+                    {value : "55", name : "Rudy Hamilton"},
+                    {value : "79", name : "Michael Jordan"}
+                ];
+                var options = {
+                    selectedItemProp : "name",
+                    searchObjProps : "name",
+                    fadeOut : 'slow',
+                    usePlaceholder : true,
+                    startText : '',
+                    creationText: ' - Add this keyword'
+                };
+                input.autoSuggest(data, options);
+
+                form.submit(function (event) {
+                    event.preventDefault();
+                    output.text('Selected: ' + input.parent('.as-original').find(':hidden').val());
+                });
+            }());
+
             (function () {
                 var container = builder('Demo with static data + renderer + fake placeholder.', 'name', 'Name');
                 container.addClass('user-list');

diff --git a/dist/jquery.autoSuggest.js b/dist/jquery.autoSuggest.js
@@ -775,14 +775,48 @@ Based on the 1.6er release dated in July, 2012
           return fetcher(string, processData);
         };
         processData = function(data, query) {
-          var formatted, forward, matchCount, name, num, regex, resultsContainerVisible, str, text, workingData, _k, _l, _len2, _len3, _ref2;
+          var creation_hint, formatted, forward, matchCount, name, num, original_query, regex, resultsContainerVisible, str, text, workingData, _k, _l, _len2, _len3, _ref2;
+          creation_hint = false;
+          original_query = query;
           if (!options.matchCase) {
             query = query.toLowerCase();
           }
           query = query.replace('(', '\(', 'g').replace(')', '\)', 'g');
           matchCount = 0;
           resultsContainer.hide().html(resultsList.html(''));
           num = 0;
+          if (options.creationText && $.grep(data, function(item) {
+            return item[options.selectedItemProp].toLowerCase() === query;
+          }).length === 0 && !currentSelection.exist(query)) {
+            formatted = $("<li class=\"as-result-item\" id=\"as-result-item-" + num + "\"></li>");
+            formatted.on({
+              click: function() {
+                var n_data;
+                n_data = {};
+                n_data["" + options.selectedItemProp] = original_query;
+                n_data["" + options.selectedValuesProp] = original_query;
+                input.val('').focus();
+                prev = '';
+                addSelection(n_data, "00" + (selectionsContainer.find('li').length + 1));
+                resultsContainer.hide();
+              },
+              mousedown: function() {
+                input_focus = false;
+              },
+              mouseover: function() {
+                element = $(this);
+                resultsList.find('li').removeClass('active');
+                element.addClass('active');
+              }
+            });
+            formatted.data('data', {
+              attributes: data[num],
+              num: num_count
+            });
+            formatted = formatted.html('<em>' + original_query + '</em>' + options.creationText);
+            resultsList.append(formatted);
+            creation_hint = true;
+          }
           for (_k = 0, _len2 = data.length; _k < _len2; _k++) {
             item = data[_k];
             num_count++;
@@ -867,7 +901,7 @@ Based on the 1.6er release dated in July, 2012
             num += 1;
           }
           selectionsContainer.removeClass('loading');
-          if (matchCount <= 0) {
+          if (matchCount <= 0 && !creation_hint) {
             text = options.emptyText;
             if ($.type(options.emptyTextPlaceholder) === 'regexp') {
               text = text.replace(options.emptyTextPlaceholder, query);
@@ -877,7 +911,7 @@ Based on the 1.6er release dated in July, 2012
           resultsList.css({
             width: selectionsContainer.outerWidth()
           });
-          resultsContainerVisible = matchCount > 0 || options.showResultListWhenNoMatch;
+          resultsContainerVisible = matchCount > 0 || options.showResultListWhenNoMatch || options.creationText;
           if (resultsContainerVisible) {
             resultsContainer.show();
           }

diff --git a/dist/jquery.autoSuggest.min.js b/dist/jquery.autoSuggest.min.js
diff --git a/src/jquery.autoSuggest.coffee b/src/jquery.autoSuggest.coffee
@@ -676,12 +676,40 @@ pluginMethods =
         fetcher string, processData
 
       processData = (data, query) ->
+        creation_hint = false
+        original_query = query
         if !options.matchCase
           query = query.toLowerCase()
         query = query.replace('(', '\(', 'g').replace(')', '\)', 'g')
         matchCount = 0
         resultsContainer.hide().html(resultsList.html(''))
         num = 0
+        if options.canGenerateNewSelections && options.creationText && $.grep(data, (item) -> item[options.selectedItemProp].toLowerCase() == query ).length is 0 && !currentSelection.exist(query)
+          formatted = $("<li class=\"as-result-item\" id=\"as-result-item-#{num}\"></li>")
+          formatted.on
+            click : ->
+              n_data = {}
+              n_data["#{options.selectedItemProp}"] = original_query
+              n_data["#{options.selectedValuesProp}"] = original_query
+              input.val('').focus()
+              prev = ''
+              addSelection n_data, "00#{selectionsContainer.find('li').length + 1}"
+              resultsContainer.hide()
+              return
+            mousedown : ->
+              input_focus = false
+              return
+            mouseover : ->
+              element = $(this)
+              resultsList.find('li').removeClass 'active'
+              element.addClass 'active'
+              return
+          formatted.data 'data',
+            attributes : data[num]
+            num : num_count
+          formatted = formatted.html '<em>' + original_query + '</em>' + options.creationText
+          resultsList.append formatted
+          creation_hint = true
         for item in data
           num_count++
           forward = false
@@ -749,13 +777,13 @@ pluginMethods =
               break
           num += 1
         selectionsContainer.removeClass 'loading'
-        if matchCount <= 0
+        if matchCount <= 0 && !creation_hint
           text = options.emptyText
           if $.type(options.emptyTextPlaceholder) is 'regexp'
             text = text.replace options.emptyTextPlaceholder, query
           resultsList.html "<li class=\"as-message\">#{text}</li>"
         resultsList.css width : selectionsContainer.outerWidth()
-        resultsContainerVisible = matchCount > 0 || options.showResultListWhenNoMatch
+        resultsContainerVisible = matchCount > 0 || options.showResultListWhenNoMatch || options.creationText
         if resultsContainerVisible
           resultsContainer.show()
         if $.isFunction(options.afterResultListShow) then options.afterResultListShow.call this, resultsContainerVisible

diff --git a/test/jquery.autoSuggest_test.js b/test/jquery.autoSuggest_test.js
@@ -501,6 +501,52 @@
       remove();
     });
 
+    module('Configuration: "options.creationText"', {
+      teardown : function () {
+        remove();
+      }
+    });
+
+    asyncTest('Type Bobby and see the creation message next to it in the list', 4, function () {
+      el = create(null, $.extend({}, options, {
+        creationText : ' - Add this keyword'
+      }));
+      $.simulate2.triggerKeyEventsForString(el, 'Bobby', 0, true);
+
+      setTimeout(function () {
+        // Here goes three suggestions
+        res = results();
+        equal(res.length, 1, "Should suggest 1 names");
+        equal($(res[0]).text(), "Bobby - Add this keyword", "Should be Bobby - Add this keyword");
+
+        // Select Bobby
+        $(res[0]).simulate("click");
+        sel = selections();
+        equal(sel.length, 1, "Should have one name");
+        equal($(sel[0]).text(), "×Bobby", "Should be Bobby");
+
+        start();
+        remove();
+      }, 500);
+    });
+
+    asyncTest('Type mick jagger and see that the creation bubble is not displayed', 2, function () {
+      el = create(null, $.extend({}, options, {
+        creationText : ' - Add this keyword'
+      }));
+      $.simulate2.triggerKeyEventsForString(el, 'mick jagger', 0, true);
+
+      setTimeout(function () {
+        // Here goes three suggestions
+        res = results();
+        equal(res.length, 1, "Should suggest 1 names");
+        equal($(res[0]).text(), "Mick Jagger", "Should be Mick Jagger");
+
+        start();
+        remove();
+      }, 500);
+    });
+
     module('Configuration: "onAjaxRequestAlways"', {
       teardown : function () {
         remove();