Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added an example to show the usage of resultFormatter to highlight th…

…e matching portion of a result
  • Loading branch information...
commit da6c83142b74054749fa14cec6d3a191c168294c 1 parent cfc9415
@laktek authored
Showing with 40 additions and 5 deletions.
  1. +40 −4 demo/index.html
  2. +0 −1  jquery.smart_autocomplete.js
View
44 demo/index.html
@@ -23,9 +23,7 @@
//example 4
$("#type_ahead_only_autocomplete_field").smartAutoComplete({source: ['Apple', 'Banana', 'Orange', 'Mango'], typeAhead: true, maxResults: 1, resultsContainer: false });
- //example 5
- $("#jazz_musicians_field").smartAutoComplete({
- source: [
+ var jazz_musicians = [
"Scott Joplin",
"Charles Bolden",
"Duke Ellington",
@@ -49,7 +47,11 @@
"Billie Holiday",
"Ella Fitzgerald",
"Sarah Vaughan"
- ],
+ ];
+
+ //example 5
+ $("#jazz_musicians_field").smartAutoComplete({
+ source: jazz_musicians,
filter: function(term, source){
var filtered_and_sorted_list = $.map(source, function(item){
@@ -97,6 +99,27 @@
});
+ //example 7
+ $("#jazz_musicians_with_highlight_field").smartAutoComplete({
+ source: jazz_musicians,
+
+ filter: function(term, source){
+ var filtered_and_sorted_list = $.map(source, function(item){
+ var score = item.toLowerCase().score(term.toLowerCase());
+
+ if(score > 0)
+ return { 'name': item, 'value': score }
+ }).sort(function(a, b){ return b.value - a.value });
+
+ return $.map(filtered_and_sorted_list, function(item){
+ return item.name;
+ });
+ },
+
+ resultFormatter: function(r){ return ("<li>" + r.replace(new RegExp($(this.context).val(),"gi"), "<strong>$&</strong>") + "</li>"); }
+
+ });
+
});
</script>
@@ -221,6 +244,19 @@
</div>
</fieldset>
+ <fieldset id="example_7">
+ <legend>Example 7</legend>
+
+ <p>Clone of Example 5 which highlights matching portion in results (note the use of <em>resultFormatter</em> option).</p>
+
+ <div>
+ <label for="jazz_musicians_with_highlight_field">Favorite Jazz Musician</label>
+ <input type="text" autocomplete="off" id="jazz_musicians_with_highlight_field"/>
+ </div>
+ </fieldset>
+
+
+
</form>
</div>
View
1  jquery.smart_autocomplete.js
@@ -472,7 +472,6 @@
});
//check for loosing focus on smart complete field and results container
- //$(this).blur(function(ev){
$(document).bind("focusin click", function(ev){
if($(options.resultsContainer).is(':visible')){
var elemIsParent = $.contains(options.resultsContainer[0], ev.target);
Please sign in to comment.
Something went wrong with that request. Please try again.