Home / Programmazione / Javascript - AJAX / Javascript autocomplete con Awesomplete
Mattepuffo

Javascript autocomplete con Awesomplete

Javascript autocomplete con Awesomplete

Per creare una lista autocomplete, in genere uso jQuery UI Autocomplete.
 
Non solo perchè mi ci trovo bene, ma anche perchè comunque jQuery UI lo uso a prescindere.
 
Ma ho trovato un'altra libreria molto semplice da usare: Awesocomplete!
 
Non ha dipendenze esterne, quindi basta includere la libreria e impostare la pagina.
 
Vediamo un pò di esempi.

BASICO

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Awesomplete</title>
            <link rel="stylesheet" href="awesomplete.css">
            <script src="awesomplete.min.js"></script>
        </head>
        <body>
            <input class="awesomplete" list="my_list">
            <datalist id="my_list">
                <option>PHP</option>
                <option>Java</option>
                <option>Python</option>
                <option>Ruby</option>
                <option>C</option>
                <option>C++</option>
                <option>C#</option>
                <option>Perl</option>
                <option>Javascript</option>
                <option>jQuery</option>
                <option>Node.js</option>
            </datalist>
        </body>
    </html>
 

INIT IN JAVASCRIPT
 

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Awesomplete</title>
            <link rel="stylesheet" href="awesomplete.css">
            <script src="awesomplete.min.js"></script>
            <script>
                window.onload = function () {
                    var input = document.getElementById("my_input");
                    new Awesomplete(input, {
                        list: "#my_list",
                        minChars: 1,
                        maxItems: 15
                    });
                }
            </script>
        </head>
        <body>
            <input id="my_input">
            <ul id="my_list" style="display: none;">
                <li>PHP</li>
                <li>Java</li>
                <li>Python</li>
                <li>Ruby</li>
                <li>C</li>
                <li>C++</li>
                <li>C#</li>
                <li>Perl</li>
                <li>Javascript</li>
                <li>jQuery</li>
                <li>Node.js</li>
            </ul>
        </body>
    </html>
 

SOLO JAVASCRIPT
 

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Awesomplete</title>
            <link rel="stylesheet" href="awesomplete.css">
            <script src="awesomplete.min.js"></script>
            <script>
                window.onload = function () {
                    var input = document.getElementById("my_input");
                    new Awesomplete(input, {
                        list: ['PHP', 'Java', 'Python', 'Ruby', 'C', 'C++', 'C#', 'Perl', 'Javascript', 'jQuery', 'Node.js']
                    });
                }
            </script>
        </head>
        <body>
            <input id="my_input">
        </body>
    </html>
 

CAMBIO VALORE IN INPUT

   <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Awesomplete</title>
            <link rel="stylesheet" href="awesomplete.css">
            <script src="awesomplete.min.js"></script>
            <script>
                window.onload = function () {
                    var input = document.getElementById("my_input");
                    new Awesomplete(input, {
                        list: [
                            ['Italia', 'IT'],
                            ['Russia', 'RU']
                        ]
                    });
                }
            </script>
        </head>
        <body>
            <input id="my_input">
        </body>
    </html>
 

Fate delle prove per capire le differenze.
 
Come vedete è molto semplice da usare.
 
Enjoy!