Sep 262013
 

Pour activer l’autocomplete (JQuery UI) uniquement en cliquant sur le bouton recherche.

Le champs HTML :



Autocomplete sur le champs, on fixe l’option « minLength » pour ne pas le déclencher automatiquement :

var source = ['un', 'deux', 'trois', 'quatre'];

$("input#autocomplete").autocomplete({
    minLength: 10000,
    source: source
});

Pour lancer la recherche via le click sur le bouton « recherche » :

$('#btn-recherche').on('click', function(){
        var champs = $( 'input#autocomplete' );
        var valeur = champs.val();
        if ( $.trim(valeur) != '' ) { 
            champs.addClass('ui-autocomplete-loading');       
            champs.autocomplete('option', 'minLength', 0);
            champs.autocomplete('search',valeur);
            champs.removeClass('ui-autocomplete-loading');   
            champs.autocomplete('option', 'minLength', 10000);
        } 
    });
VN:F [1.9.22_1171]
Cette astuce est pratique ? laissez un vote ;)
Rating: 8.5/10 (2 votes cast)
Juil 112012
 

Pour afficher une image de chargement sur un champ autocomplété avec JQuery :

CSS

.chargement{background:url('../img/chargement.gif') no-repeat right center;}

JS

$("#champs-input").autocomplete
(
search  : function(){$(this).addClass('chargement');},
open    : function(){$(this).removeClass('chargement');}
);
VN:F [1.9.22_1171]
Cette astuce est pratique ? laissez un vote ;)
Rating: 9.0/10 (1 vote cast)