Mark Lavin avatar Mark Lavin committed 7fd7dec

JS/CSS work for highlighting term matches in the label. See #20. Also allows for html in the labels. See #33.

Comments (0)

Files changed (2)

selectable/static/selectable/css/dj.selectable.css

     display: inline;
     float: none;
 }
+ul.ui-autocomplete li.ui-menu-item span.highlight {
+    font-weight: bold;
+}

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

                 }
             }).addClass("ui-widget ui-widget-content ui-corner-all");
             $(input).data("autocomplete")._renderItem = function(ul, item) {
+                var re = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
+                $.ui.autocomplete.escapeRegex(this.term) +
+                ")(?![^<>]*>)(?![^&;]+;)", "gi");
+                var label = item.label.replace(re, "<span class='highlight'>$1</span>");
                 var li =  $("<li></li>")
 			        .data("item.autocomplete", item)
-			        .append($("<a></a>").text(item.label))
+			        .append($("<a></a>").html(label))
 			        .appendTo(ul);
                 if (item.page) {
                     li.addClass('selectable-paginator');
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.