Vous qui lisez ces lignes, vous devez connaître tous les plugins d'autocomplete et autres qui existent de part la toile.
Ils sont tous plus ou moins sympas, mais en voulant en chercher un qui ne s'occupe que de la mécanique de détection de la frappe, je me suis retrouvé face au néant.
J'avais simplement besoin d'un plugin qui me déclenche un évènement de frappe de texte pour effectuer un filtrage sur les données d'un select, impossible d'en trouver un.
Force a été de constater qu'il était plus rentable de le coder que de passer des heures à chercher.
Javascript :
$(function() {
$('input.demo1').keyChange(function(evt, text) {
$('span.demo1').html(text);
});
});
Html :
saisie :
Résultat :
saisie :
On déclare simplement une fonction de callback qui vient écrire le texte tapé dans un span
.
Une utilisation réelle serait pour filtrer des données ou faire une requête ajax de filtrage etc ...
Javascript :
$(function() {
$('input.demo2').keyChange({
minLength: 3,
delay: 1000
}, function(evt, text) {
$('span.demo2').html(text);
});
});
Html :
saisie :
Résultat :
saisie :
La syntaxe doit vous rappeler le binding d'évènement jQuery, c'est normal, le principe est le même, vous pouvez
passer des options au binding. Dans le cas ou vous voulez utiliser ces options, il doit d'agir du premier appel à
keyChange
pour les éléments considérés, sinon, les options seront ignorées.
Javascript :
$(function() {
$(document).keyChange('input.demo3', function(evt, text) {
$(this).next('span.res3').html(text);
});
});
Html :
saisie :
Résultat :
saisie :
cette syntaxe JS ext un équivalent de ce qu'on voudrait naturellement écrire $(document).on('keyChange', ...)
.
Il est obligatoire de passer par cette syntaxe $(document).keyChange(...)
car cela positionne correctement les events dépendants.
Javascript :
$(function() {
$('input.demo4')
.keyChange()
.bind('keyChange',
function(evt, text) {
$('span.res4').html(text);
}
)
.bind('keyChange',
function(evt, text) {
var nb = $('span.cpt4').html();
$('span.cpt4').html(parseInt(nb) + 1);
}
);
});
Html :
saisie :
compteur : 0
Résultat :
saisie :
compteur : 0
Le code JS déclenche le système de binding .keyChange()
, puis connecte ensuite deux évènements via le bind jQuery.
La syntaxe .bind('keyChange', function(evt, text) { ... })
est en fait complètement équivalente à .keyChange(function(evt, text) { ... })
(function($) {
$.fn.keyChange = function(options, selector, callback) {
if ($.isFunction(options)) {
callback = options;
options = {};
selector = undefined;
}
if ($.isFunction(selector)) {
callback = selector;
if (typeof (options) === 'string') {
selector = options;
options = {};
} else {
selector = undefined;
}
}
options = $.extend({
minLength: 0,
delay: 300
}, options || {});
function init(val) {
var $this = $(this);
if (!$this.data('kcInitialized')) {
if ($this.is('input') || $this.is('textarea')) {
$this.data('kcText', typeof (val) === 'undefined' ? String($this.val()) : val);
$this.data('kcFunction', null);
}
$this.data('kcInitialized', true);
}
}
function keyup() {
init.call(this, '');
var $this = $(this);
if ($this.data('kcInitialized')) {
var val = String($this.val());
var text = $this.data('kcText');
var delayedFunction = $this.data('kcFunction');
if (text !== val && val.length >= options.minLength) {
$this.data('kcText', val);
delayedFunction && clearTimeout(delayedFunction);
$this.data('kcFunction', setTimeout(function() {
$this.trigger('keyChange', val);
}, options.delay));
}
}
}
if (typeof (selector) === 'string') {
this.on('change', selector, keyup);
this.on('keyup', selector, keyup);
if ($.isFunction(callback)) {
this.on('keyChange', selector, callback);
}
} else {
this.each(function() {
init.apply(this);
});
this.change(keyup);
this.keyup(keyup);
if ($.isFunction(callback)) {
this.bind('keyChange', callback);
}
}
return this;
};
})(jQuery);