Skip to content

Commit dbc9add

Browse files
jzaeffererjzaefferer
committed
Autocomplete: Refactored code for array filtering into $.ui.autocomplete.filter, used by remote-with-cache and modified multiple-demo (now with local data); added multiple-remote to also show multiple with remote data
1 parent cddf2a4 commit dbc9add

File tree

5 files changed

+94
-23
lines changed

5 files changed

+94
-23
lines changed

‎demos/autocomplete/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ <h4>Examples</h4>
1818
<li><a href="xml.html">XML data parsed once</a></li>
1919
<li><a href="categories.html">Categories</a></li>
2020
<li><a href="multiple.html">Multiple values</a></li>
21+
<li><a href="multiple.html">Multiple, remote</a></li>
2122
</ul>
2223
</div>
2324
</body>

‎demos/autocomplete/multiple-remote.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>jQuery UI Autocomplete multiple demo</title>
6+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7+
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10+
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11+
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12+
<link type="text/css" href="../demos.css" rel="stylesheet" />
13+
<script type="text/javascript">
14+
$(function() {
15+
function split(val) {
16+
return val.split(/,\s*/);
17+
}
18+
function extractLast(term) {
19+
return split(term).pop();
20+
}
21+
22+
$("#birds").autocomplete({
23+
source: function(request, response) {
24+
$.getJSON("search.php", {
25+
term: extractLast(request.term)
26+
}, response);
27+
},
28+
search: function() {
29+
// custom minLength
30+
var term = extractLast(this.value);
31+
if (term.length < 2) {
32+
return false;
33+
}
34+
},
35+
focus: function() {
36+
// prevent value inserted on focus
37+
return false;
38+
},
39+
select: function(event, ui) {
40+
var terms = split( this.value );
41+
// remove the current input
42+
terms.pop();
43+
// add the selected item
44+
terms.push( ui.item.value );
45+
// add placeholder to get the comma-and-space at the end
46+
terms.push("");
47+
this.value = terms.join(", ");
48+
return false;
49+
}
50+
});
51+
});
52+
</script>
53+
</head>
54+
<body>
55+
56+
<div class="demo">
57+
58+
<div class="ui-widget">
59+
<label for="birds">Birds: </label>
60+
<input id="birds" size="50" />
61+
</div>
62+
63+
</div><!-- End demo -->
64+
65+
<div class="demo-description">
66+
<p>
67+
Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.
68+
</p>
69+
<p>
70+
This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
71+
</p>
72+
</div><!-- End demo-description -->
73+
74+
</body>
75+
</html>

‎demos/autocomplete/multiple.html

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,19 @@
1212
<link type="text/css" href="../demos.css" rel="stylesheet" />
1313
<script type="text/javascript">
1414
$(function() {
15+
var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
1516
function split(val) {
1617
return val.split(/,\s*/);
1718
}
1819
function extractLast(term) {
1920
return split(term).pop();
2021
}
2122

22-
$("#birds").autocomplete({
23+
$("#tags").autocomplete({
24+
minLength: 0,
2325
source: function(request, response) {
24-
$.getJSON("search.php", {
25-
term: extractLast(request.term)
26-
}, response);
27-
},
28-
search: function() {
29-
// custom minLength
30-
var term = extractLast(this.value);
31-
if (term.length < 2) {
32-
return false;
33-
}
26+
// delegate back to autocomplete, but extract the last term
27+
response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
3428
},
3529
focus: function() {
3630
// prevent value inserted on focus
@@ -56,15 +50,15 @@
5650
<div class="demo">
5751

5852
<div class="ui-widget">
59-
<label for="birds">Birds: </label>
60-
<input id="birds" size="50" />
53+
<label for="tags">Tag programming languages: </label>
54+
<input id="tags" size="50" />
6155
</div>
6256

6357
</div><!-- End demo -->
6458

6559
<div class="demo-description">
6660
<p>
67-
Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.
61+
Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.
6862
</p>
6963
<p>
7064
This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.

‎demos/autocomplete/remote-with-cache.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,11 @@
2222
source: function(request, response) {
2323
if (cache.term == request.term && cache.content) {
2424
response(cache.content);
25+
return;
2526
}
2627
if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) {
27-
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
28-
response($.grep(cache.content, function(value) {
29-
return matcher.test(value.value)
30-
}));
28+
response($.ui.autocomplete.filter(cache.content, request.term));
29+
return;
3130
}
3231
$.ajax({
3332
url: "search.php",

‎ui/jquery.ui.autocomplete.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -166,11 +166,7 @@ $.widget( "ui.autocomplete", {
166166
if ( $.isArray(this.options.source) ) {
167167
array = this.options.source;
168168
this.source = function( request, response ) {
169-
// escape regex characters
170-
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
171-
response( $.grep( array, function(value) {
172-
return matcher.test( value.label || value.value || value );
173-
}) );
169+
response( $.ui.autocomplete.filter(array, request.term) );
174170
};
175171
} else if ( typeof this.options.source === "string" ) {
176172
url = this.options.source;
@@ -308,6 +304,12 @@ $.widget( "ui.autocomplete", {
308304
$.extend( $.ui.autocomplete, {
309305
escapeRegex: function( value ) {
310306
return value.replace( /([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1" );
307+
},
308+
filter: function(array, term) {
309+
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
310+
return $.grep( array, function(value) {
311+
return matcher.test( value.label || value.value || value );
312+
});
311313
}
312314
});
313315

0 commit comments

Comments
 (0)