bonjour tout le monde.
ça fait un bout de temps que je cherche sans réponse à ma question.
j'essaye de développer un plugin jQuery qui va filtrer le contenu d'une htmlSelect selon le texte tapé par l'utilisateur dans une htmlInputText.
voilà la code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
(function($){
 
	function keyup() {
		alert(this._select); // j'obtien toujours "undefined"
		// valeur a chercher
		value = $(this).val();
 
		// vider la liste
		$(this._select).empty();
 
		$(this.allOptions).each(function() {
			if ($(this).text().toLowerCase().indexOf(value.toLowerCase()) != -1) {
				opt = $(this).clone();
				$(this._select).append(opt);
			}
		});
	};
 
	function selectOnFocus(){
		$(this.input).stop(true,true).fadeIn('fast');
	};
 
$.fn.filterSelect = function (options) {
 
	var defaultOptions = {
							inputClassName: '',  // class a ajouter a l'objet input text qui sera ajouté avant le select
							Width: '',               // width du div
							Height: ''               // height du div
						 };
 
	// appliquer les options passés en paramettre
	defaultOptions = $.extend(defaultOptions, options);
 
	$(this).each(function() {
		// si  l'element n'est pas un HTMLSelectElement alors ne rien faire
		if (!(this instanceof HTMLSelectElement)) return this;
 
		this._select = this;
 
		this.input = $('<input />', {
									id: this.id + '_srch',
									type: 'text',
									'class': defaultOptions.inputClassName,
									autocomplete: 'off'
								});
		div = $('<div >',{});
 
		$(this.input).css({
							display: 'none'
						});
 
		$(this).wrap(div);
 
		$(this).before(this.input);
 
		if (defaultOptions.selectHeight != '') $(div).height(defaultOptions.Height);
		if (defaultOptions.selectWidth != '') $(div).width(defaultOptions.Width);
 
		// attribs
		this.allOptions = $(this).find('option').clone();
 
		this.keyup = keyup;
		$(this.input).bind('keyup', this.keyup);
 
		this.selectOnFocus = selectOnFocus;
		$(this._select).bind('focus', this.selectOnFocus);
	});
	return this;
}
 
})(jQuery);
et pour l'utilisation dans une page html

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
<script>
	$(document).ready(function() {
		$('select').filterSelect({Width: 290, Height: '100%', inputClassName: 'input_text'});
	});
</script>
maintenant quand je focus l'htmlInputText j'obtien la valeur "undefined".
je ne sais pas pourquoi ?
si je met la définition de la fonction keyup() à l'intérieur de la fonction each() elle fonctionne mais je veux qu'elle soit partagée afin de gagner au niveau des performances.
aidez moi svp et merci d'avance.