Mark Lavin avatar Mark Lavin committed 10d07e8

Tests for formatLabel option in combination with highlighting matches. Add support for formatLabel returning a jQuery object rather than just a string. Don't highlight matches on the pagination labels.

Comments (0)

Files changed (2)

selectable/static/selectable/js/jquery.dj.selectable.js

             highlights term matches and handles pagination. */
             var label = item.label,
                 self = this,
-                $input = $(this.element);
-            if (this.options.formatLabel) {
+                $input = $(this.element),
+                re = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
+                $.ui.autocomplete.escapeRegex(this.term) +
+                ")(?![^<>]*>)(?![^&;]+;)", "gi"),
+                 html, li;
+            if (this.options.formatLabel && !item.page) {
                 label = this.options.formatLabel.apply(this, [label, item]);
             }
-            if (this.options.highlightMatch && this.term) {
-                var re = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
-                $.ui.autocomplete.escapeRegex(this.term) +
-                ")(?![^<>]*>)(?![^&;]+;)", "gi");
-                label = label.replace(re, "<span class='highlight'>$1</span>");
+            if (this.options.highlightMatch && this.term && !item.page) {
+                if (label.html) {
+                    html = label.html();
+                    html = html.replace(re, "<span class='highlight'>$1</span>");
+                    label.html(html);
+                } else {
+                    label = label.replace(re, "<span class='highlight'>$1</span>");
+                }
             }
-            var li = $("<li></li>")
+            li = $("<li></li>")
                 .data("item.autocomplete", item)
                 .append($("<a></a>").append(label))
                 .appendTo(ul);

selectable/tests/qunit/test-options.js

             start();
         }, 300);
     });
+
+    test("Format Label String (No Highlight)", function () {
+        expect(3);
+        var response = simpleLookupResponse(),
+            self = this,
+            menu, item, custom, highlight;
+        function customFormat(label, item) {
+            return "<span class='custom'>" +  label + "</span>";
+        }
+        this.input.djselectable("option", "formatLabel", customFormat);
+        this.input.djselectable("option", "highlightMatch", false);
+        this.input.val("ap").keydown();
+        stop();
+        setTimeout(function () {
+            self.requests[0].respond(200, {"Content-Type": "application/json"},
+                JSON.stringify(response)
+            );
+            menu = $('ul.ui-autocomplete.ui-menu:visible');
+            item = $('li', menu).eq(0);
+            custom = $('.custom', item);
+            equal(custom.length, 1, "Custom label should be present");
+            equal(custom.text(), "Apple", "Label text should match");
+            highlight = $('.highlight', item);
+            equal(highlight.length, 0, "Highlight should not be present");
+            start();
+        }, 300);
+    });
+
+    test("Format Label jQuery Object (No Highlight)", function () {
+        expect(3);
+        var response = simpleLookupResponse(),
+            self = this,
+            menu, item, custom, highlight
+        function customFormat(label, item) {
+            return $("<span>").addClass("custom").text(label);
+        }
+        this.input.djselectable("option", "formatLabel", customFormat);
+        this.input.djselectable("option", "highlightMatch", false);
+        this.input.val("ap").keydown();
+        stop();
+        setTimeout(function () {
+            self.requests[0].respond(200, {"Content-Type": "application/json"},
+                JSON.stringify(response)
+            );
+            menu = $('ul.ui-autocomplete.ui-menu:visible');
+            item = $('li', menu).eq(0);
+            custom = $('.custom', item);
+            equal(custom.length, 1, "Custom label should be present");
+            equal(custom.text(), "Apple", "Label text should match");
+            highlight = $('.highlight', item);
+            equal(highlight.length, 0, "Highlight should not be present");
+            start();
+        }, 300);
+    });
+
+    test("Format Label String (With Highlight)", function () {
+        expect(4);
+        var response = simpleLookupResponse(),
+            self = this,
+            menu, item, custom, highlight;
+        function customFormat(label, item) {
+            return "<span class='custom'>" +  label + "</span>";
+        }
+        this.input.djselectable("option", "formatLabel", customFormat);
+        this.input.djselectable("option", "highlightMatch", true);
+        this.input.val("ap").keydown();
+        stop();
+        setTimeout(function () {
+            self.requests[0].respond(200, {"Content-Type": "application/json"},
+                JSON.stringify(response)
+            );
+            menu = $('ul.ui-autocomplete.ui-menu:visible');
+            item = $('li', menu).eq(0);
+            custom = $('.custom', item);
+            equal(custom.length, 1, "Custom label should be present");
+            equal(custom.text(), "Apple", "Label text should match");
+            highlight = $('.highlight', custom);
+            equal(highlight.length, 1, "Highlight should be present");
+            equal(highlight.text(), "Ap", "Highlight text should match");
+            start();
+        }, 300);
+    });
+
+    test("Format Label jQuery Object (With Highlight)", function () {
+        expect(4);
+        var response = simpleLookupResponse(),
+            self = this,
+            menu, item, custom, highlight;
+        function customFormat(label, item) {
+            return $("<span>").addClass("custom").text(label);
+        }
+        this.input.djselectable("option", "formatLabel", customFormat);
+        this.input.djselectable("option", "highlightMatch", true);
+        this.input.val("ap").keydown();
+        stop();
+        setTimeout(function () {
+            self.requests[0].respond(200, {"Content-Type": "application/json"},
+                JSON.stringify(response)
+            );
+            menu = $('ul.ui-autocomplete.ui-menu:visible');
+            item = $('li', menu).eq(0);
+            custom = $('.custom', item);
+            equal(custom.length, 1, "Custom label should be present");
+            equal(custom.text(), "Apple", "Label text should match");
+            highlight = $('.highlight', custom);
+            equal(highlight.length, 1, "Highlight should be present");
+            equal(highlight.text(), "Ap", "Highlight text should match");
+            start();
+        }, 300);
+    });
 });
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.