JSFiddle - React, Tailwind, and code Playground
by paska
HTML
<input id="txt" />
<ul>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
<li>abde</li>
<li>abc</li>
<li>def</li>
...
JavaScript
//Plugin -->
(function ($) {
$.fn.filtrarSegun = function(options) {
var _this = $(this);
options = $.extend({
input: $()
}, options);
options.input.keyup(function() {
_this.find(">*").hide().filter(":contains('" + $(this).val() + "')").show();
});
return _this;
};
})(jQuery);
//<-- Plugin
$(function() {
$("ul").filtrarSegun({
input: $("#txt")
});
});