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!
javascript awesomplete autocomplete
Commentami!