Javascript 6.507 visualizzazioni

Jquery: autocompletamento campo

29/03/2012

Un'altra opzione semplice ma molto utile da implementare, l'autocompletamento di un campo sulla base di termini predefiniti.

Come sempre occorre prima di tutto caricare l'ultima versione di Jquery, (qui l'articolo), subito dopo aggiungere altri quattro js, jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.position.js, jquery.ui.autocomplete.js (download qui).

Al document ready utilizzare questa sintassi sostituendo il nome del campo input (nell'esempio chiamato tags), con quello di interesse nel proprio codice (la variabile contenente i diversi termini può naturalmente esser popolata attraverso la selezione dei termini diponibili nella tabella del db di riferimento):

$(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });