Skip to content
This repository

Autocomplete Add example for using source callback, along with a note ao... #49

Closed
wants to merge 1 commit into from

2 participants

Jörn Zaefferer Scott González
Jörn Zaefferer
Owner

...but the escapeRegex method. Fixes #41

Scott González scottgonzalez commented on the diff
entries/autocomplete.xml
@@ -168,5 +169,23 @@ $( "#autocomplete" ).autocomplete({
168 169 <input id="autocomplete">
169 170 ]]></html>
170 171 </example>
  172 + <example>
  173 + <desc>Using a custom source callback to match only the beginning of terms</desc>
  174 + <code><![CDATA[
  175 +var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
  176 +$( "#autocomplete" ).autocomplete({
  177 + source: function(request, response) {
1
Scott González Owner

spaces

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Scott González scottgonzalez commented on the diff
entries/autocomplete.xml
@@ -74,6 +74,7 @@
74 74 <li>A <code>request</code> object, with a single <code>term</code> property, which refers to the value currently in the text input. For example, if the user enters <code>"new yo"</code> in a city field, the Autocomplete term will equal <code>"new yo"</code>.</li>
75 75 <li>A <code>response</code> callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the <code>response</code> callback even if you encounter an error. This ensures that the widget always has the correct state.</li>
76 76 </ul>
  77 + When filtering data locally, you can make use of the built-in <code>$.ui.autocomplete.escapeRegex</code> function. It'll take a single string argument and escape all regex characters, making the result safe to pass to <code>new RegExp()</code>.
1
Scott González Owner

<p>?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Scott González

Looks good.

Jörn Zaefferer
Owner

Landed in 9eeea1c

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Oct 13, 2012
Jörn Zaefferer jzaefferer Autocomplete Add example for using source callback, along with a note…
… aobut the escapeRegex method. Fixes #41
71f6a47
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 19 additions and 0 deletions. Show diff stats Hide diff stats

  1. +19 0 entries/autocomplete.xml
19 entries/autocomplete.xml
@@ -74,6 +74,7 @@
74 74 <li>A <code>request</code> object, with a single <code>term</code> property, which refers to the value currently in the text input. For example, if the user enters <code>"new yo"</code> in a city field, the Autocomplete term will equal <code>"new yo"</code>.</li>
75 75 <li>A <code>response</code> callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the <code>response</code> callback even if you encounter an error. This ensures that the widget always has the correct state.</li>
76 76 </ul>
  77 + When filtering data locally, you can make use of the built-in <code>$.ui.autocomplete.escapeRegex</code> function. It'll take a single string argument and escape all regex characters, making the result safe to pass to <code>new RegExp()</code>.
77 78 </desc>
78 79 </type>
79 80 </option>
@@ -168,5 +169,23 @@ $( "#autocomplete" ).autocomplete({
168 169 <input id="autocomplete">
169 170 ]]></html>
170 171 </example>
  172 + <example>
  173 + <desc>Using a custom source callback to match only the beginning of terms</desc>
  174 + <code><![CDATA[
  175 +var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
  176 +$( "#autocomplete" ).autocomplete({
  177 + source: function(request, response) {
  178 + var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
  179 + response( $.grep( tags, function( item ){
  180 + return matcher.test( item );
  181 + }) );
  182 + }
  183 +});
  184 +]]></code>
  185 + <html><![CDATA[
  186 +<label for="autocomplete">Select a programming language: </label>
  187 +<input id="autocomplete">
  188 +]]></html>
  189 + </example>
171 190 <category slug="widgets"/>
172 191 </entry>

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.