Skip to content

#410 Add configuration option for filtering created items. #414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 2, 2014
Merged

#410 Add configuration option for filtering created items. #414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2157b16
#410 Add configuration option for filtering created items. "createFi…
May 17, 2014
21994bc
Documentation tweak.
May 21, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/usage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,13 @@ $(function() {
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>createFilter</code></td>
<td valign="top">
Specifies a RegExp or String containing a regular expression that the current search filter must match to be allowed to be created. May also be a predicate function that takes the filter text and returns whether it is allowed.</td>
<td valign="top"><code>mixed</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>highlight</code></td>
<td valign="top">Toggles match highlighting within the dropdown menu.</td>
Expand Down
65 changes: 65 additions & 0 deletions examples/createFilter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Create Filter</h2>
<p>Examples of how to filter created results.</p>
<div class="control-group">
<label for="regex">Pattern</label>
<input type="text" id="regex" value="a+">
<label for="select-words-regex">Words:</label>
<select id="select-words-regex" multiple placeholder="Enter a word matching the pattern..."></select>
</div>
<div class="control-group">
<label for="length">Minimum Length</label>
<input type="text" id="length" value="2">
<label for="select-words-length">Words:</label>
<select id="select-words-length" multiple placeholder="Enter a word longer than the minimum number of characters..."></select>
</div>
<div class="control-group">
<label for="select-words-unique">Words:</label>
<select id="select-words-unique" multiple placeholder="Enter unique words (case-insensitive)..."></select>
</div>
<script>
$('#select-words-regex').selectize({
create: true,
createFilter: $('#regex').val()
});

$('#select-words-length').selectize({
create: true,
createFilter: function(input) { return input.length >= parseInt($('#length').val(), 10); }
});

var unique = $('#select-words-unique').selectize({
create: true,
createFilter: function(input) {
input = input.toLowerCase();
return $.grep(unique.getValue(), function(value) {
return value.toLowerCase() === input;
}).length == 0;
}
})[0].selectize;
</script>
</div>
</div>
</body>
</html>
1 change: 1 addition & 0 deletions src/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ Selectize.defaults = {
diacritics: true,
create: false,
createOnBlur: false,
createFilter: null,
highlight: true,
openOnFocus: true,
maxOptions: 1000,
Expand Down
14 changes: 12 additions & 2 deletions src/selectize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,16 @@ var Selectize = function($input, settings) {
self.settings.hideSelected = self.settings.mode === 'multi';
}

if (self.settings.create) {
self.canCreate = function(input) {
var filter = self.settings.createFilter;
return input.length
&& (typeof filter !== 'function' || filter(input))
&& (typeof filter !== 'string' || new RegExp(filter).test(input))
&& (!(filter instanceof RegExp) || filter.test(input));
};
}

self.initializePlugins(self.settings.plugins);
self.setupCallbacks();
self.setupTemplates();
Expand Down Expand Up @@ -1028,7 +1038,7 @@ $.extend(Selectize.prototype, {
}

// add create option
has_create_option = self.settings.create && results.query.length;
has_create_option = self.settings.create && self.canCreate(results.query);
if (has_create_option) {
$dropdown_content.prepend(self.render('option_create', {input: query}));
$create = $($dropdown_content[0].childNodes[0]);
Expand Down Expand Up @@ -1379,7 +1389,7 @@ $.extend(Selectize.prototype, {
var self = this;
var input = $.trim(self.$control_input.val() || '');
var caret = self.caretPos;
if (!input.length) return false;
if (!self.canCreate(input)) return false;
self.lock();

if (typeof triggerDropdown === 'undefined') {
Expand Down
39 changes: 39 additions & 0 deletions test/interaction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,45 @@
});
});

describe('filtering created items', function() {
function createFilterTest(createFilter) {
return setup_test('<select multiple="multiple"></select>', {create: true, createFilter: createFilter});
}

var text = 'abc';

function execFilterTest(test, done, expectation) {
var selectize = test.selectize;
Syn.click(selectize.$control).type(text, selectize.$control_input).type(selectize.settings.delimiter, selectize.$control_input).delay(0, function() {
expectation(selectize);
done();
});
}

function execFilterTests(heading, filters, expectation) {
for (var i = 0; i < filters.length; i++) {
(function(filter) {
it(heading, function(done) {
execFilterTest(createFilterTest(filter), done, expectation);
});
})(filters[i]);
}
}

execFilterTests('should add an item normally if there is no createFilter', [undefined, null, ''], function(selectize) {
expect(selectize.getItem(text).length).to.be.equal(1);
});

execFilterTests('should add an item if the input matches the createFilter', ['a', /a/, function() { return true; }], function(selectize) {
expect(selectize.getItem(text).length).to.be.equal(1);
});

execFilterTests('should not add an item or display the create label if the input does not match the createFilter', ['foo', /foo/, function() { return false; }], function(selectize) {
expect(selectize.getItem(text).length).to.be.equal(0);
expect($(selectize.$dropdown_content).filter('.create').length).to.be.equal(0);
});
});

});

})();