Result handler autocomplete.ajax

Version imprimable

Bonjour, j'utilise jquery avec codeigniter (framework mvc php).

Dans mon site, j'ai un champ de recherche autocomplete (celui de jquery UI), tout fonctionne bien sauf que j'aimerai que quand on click sur un des résultats d'autocomplete (les elements proviennent d'une bdd et sont récupérés avec json) il effectue firectement la recherche (sans avoir a cliquer sur le bouton, un peu comme la recherche google)

J'ai épluché tout internet, et apparemment, il faut utiliser le result handler de jquery.
Pourtant, il ne détecte jamais rien...
même un petit echo ne fonctionne pas:

Code:

1
2
3
	$('#autocomplete').result(function (event, data, formatted) {
        alert(data);
});

Code:

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
<link href="<?php echo $base_url;?>js/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo $base_url;?>js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $base_url;?>js/jquery/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="{base_url}css/SBA/wwn_form_design.css" media="screen" ><form></form>
<script type="text/javascript">
$(document).ready(function() {
		$( "#autocomplete" ).autocomplete({
			source: function(request, response) {
				$.ajax({ url: "<?php echo site_url('autocomplete/autocompletewwn'); ?>",
				data: { term: $("#autocomplete").val()},
				dataType: "json",
				type: "POST",
				success: function(data){
					response(data);
				}
			});
		},
		minLength: 5
	});
		$( "#autocompletesrv" ).autocomplete({
			source: function(request, response) {
				$.ajax({ url: "<?php echo site_url('autocomplete/autocompletesrv'); ?>",
				data: { term: $("#autocompletesrv").val()},
				dataType: "json",
				type: "POST",
				success: function(data){
					response(data);
				}
			});
		},
		minLength: 1
	});
	$('#autocomplete').result(function (event, data, formatted) {
        alert(data);
});
 
});
</script>
<h1><?php echo lang('list_wwn');?></h1>
	<div style="float: left;"><form method="post" action="">
		<label>WWN : </label>
		<input type="text" id="autocomplete" name="wwn" value="" />
		<input type="hidden" name="key" value="1">
		<input type="submit" value="<?php echo lang('search');?>" />
	</form></div>
	<div style="padding-left: 71%;"><form method="post" action="">
		<label><?php echo lang('server');?></label>
		<input type="text" id="autocompletesrv" name="server" value="" />
		<input type="hidden" name="key" value="2">
		<input type="submit" id="clicktest" value="<?php echo lang('search');?>" />
	</form></div>

15/09/2011, 15h03
b4bass

je pense avoir trouvé un début de réponse à mon problème, mais mon soucis est que je n'arrive pas à implémenter cette solution :
http://docs.jquery.com/Frequently_As...JAX_request.3F

Je suis une vrai bille en js :(

J'ai résolu mon problème, bon, ça doit etre super crade mais c'est tout ce que j'ai pu faire :

Code:

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
<script type="text/javascript">
$(document).ready(function() {
	var key;
	function setKey(valeur){
		key = valeur;
	}
		$( "input#autocomplete" ).autocomplete({
			source: function(request, response) {
				$.ajax({ url: "<?php echo site_url('autocomplete/autocompletewwn'); ?>",
				data: { term: $("#autocomplete").val()},
				dataType: "json",
				type: "POST",
				success: function(data){
					setKey(1);
					response(data);
				}
			});
		},
		minLength: 5
	});
		$( "#autocompletesrv" ).autocomplete({
			source: function(request, response) {
				$.ajax({ url: "<?php echo site_url('autocomplete/autocompletesrv'); ?>",
				data: { term: $("#autocompletesrv").val()},
				dataType: "json",
				type: "POST",
				success: function(data){
					setKey(2);
					response(data);
				}
			});
		},
		minLength: 1
	});
		$('.ui-menu-item').live('click', function() {
			switch(key) {
				case 1: $('#clickwwn').click();
				break;
				case 2: $('#clicksrv').click();
				break;
				}
 
	});
});
 
</script>