I am having a list similar to this which works with the simple regular expression, now my requirement is to add a comma separated multiple search option.
For example in this right now if i am typing "Elaine" it shows me "Elaine Marley", now i want, if i am typing "Elaine, Stan" it should return me two result "Elaine Marley" & "Stan".
Please let me know in case more details needed, any help would be appreciated.
Can anyone help me with the regular expression?
Thanks
Dhiraj
Take a look at the the demo before reading :
// http://stackoverflow.com/a/3561711/1636522
RegExp.escape = function(s) {
return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};
// vars
var span = getEl('span'),
input = getEl('input'),
li = getEls('li'),
tid;
// onkeyup
addEventSimple(input, 'keyup', function(e) {
// cancels previous query
tid && clearTimeout(tid);
// waits 250ms then filters
tid = setTimeout(function() {
tid = null;
span.textContent = +span.textContent + 1;
filter(e.target.value);
}, 250);
});
// filtering
function filter(input) {
var i = 0,
l = li.length,
re = input && toRegex(input),
el;
for (; i < l; i++) {
el = li[i]; // list item
if (!re || re.test(el.textContent)) {
el.style.display = 'list-item';
} else {
el.style.display = 'none';
}
}
}
// input > regex
function toRegex(input) {
input = RegExp.escape(input);
input = input.match(/[^,\s]+(\s+[^,\s]+)*/g) || [];
input = input.join('|');
return new RegExp(input, 'i');
}
// http://www.quirksmode.org/js/eventSimple.html
function addEventSimple(obj, evt, fn) {
if (obj.addEventListener) obj.addEventListener(evt, fn, false);
else if (obj.attachEvent) obj.attachEvent('on' + evt, fn);
}
// helpers
function getEl(tag) {
return getEls(tag)[0];
}
function getEls(tag) {
return document.getElementsByTagName(tag);
}<input type="text" placeholder="Example : "nn, oo, ca"." />
<div style="padding:.5em .5em 0">Filtered <span>0</span> times.</div>
<ul>
<li>Guybrush Threepwood</li>
<li>Elaine Marley</li>
<li>LeChuck</li>
<li>Stan</li>
<li>Voodoo Lady</li>
<li>Herman Toothrot</li>
<li>Meathook</li>
<li>Carla</li>
<li>Otis</li>
<li>Rapp Scallion</li>
<li>Rum Rogers Sr.</li>
<li>Men of Low Moral Fiber</li>
<li>Murray</li>
<li>Cannibals</li>
</ul>Here I'll only expose the toRegex function. Say that we have entered the following value : "el, le, az".
var regex = toRegexp('el, le, az'); // regex = /el|le|az/i
regex.test('Elaine'); // true -> show
regex.test('Marley'); // true -> show
regex.test('Stan'); // false -> hide
The resulting regular expression (/el|le|az/i) means : search for "el" or "le" or "az", and ignore the case (allows "EL", "Le" or "aZ" as well). Now, let's read this function line by line :
input = RegExp.escape(input); // http://stackoverflow.com/q/3561493/1636522
input = input.match(/[^,\s]+(\s+[^,\s]+)*/g) || []; // ["el", "le", "az"]
input = input.join('|'); // "el|le|az"
return new RegExp(input, 'i'); // /el|le|az/i
Let's go further about /[^,\s]+(\s+[^,\s]+)*/g :
[^,\s]+ any char except comma and whitespace, one or more times
(\s+[^,\s]+)* one or more whitespaces + same as above, zero or more times
g grab all occurrences
Usage example with a stupid input :
'a,aa,aa a, b , bb , bb b , , '.match(/[^,\s]+(\s+[^,\s]+)*/g);
// ["a", "aa", "aa a", "b", "bb", "bb b"]
That's it ! Hope that was clear enough :-)
Further reading : http://www.javascriptkit.com/javatutors/redev.shtml.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments