En este artículo, aprenderemos a implementar la búsqueda dinámica de autocompletar usando Bootstrap Typeahead. Bootstrap Typeahead es un complemento que ayuda a agregar una hermosa opción de autocompletar en la barra de búsqueda.
En este enfoque, tomaremos datos estáticos para autocompletar, pero también podemos usar datos JSON dinámicos para mostrar las opciones de búsqueda. Los métodos utilizados en el complemento Typeahead son los siguientes.
- .typeahead(opciones): Inicializa una entrada con una escritura anticipada.
- .lookup: para activar la función de búsqueda externamente.
- .getActive: para obtener el elemento actualmente activo, obtendrá una string o un objeto JSON según cómo haya inicializado la escritura anticipada. Funciona solo para el primer partido.
Ejemplo: El siguiente ejemplo demuestra la búsqueda dinámica de autocompletar utilizando Bootstrap Typehead.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js">
</script>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
rel="stylesheet" />
<style>
.typeahead {
width: 50%;
top: 60px !important;
left: 50px !important;
}
</style>
</head>
<body style="text-align: center">
<div>
<b><p>Suggest the states of India</p></b>
<input type="text" class="typeahead"
data-provide="typeahead"
placeholder="Enter name of states of India " />
</div>
<script>
// Initializes input( name of states)
// with a typeahead
var $input = $(".typeahead");
$input.typeahead({
source: [
"Andhra Pradesh",
"Arunachal Pradesh",
"Assam",
"Bihar",
"Chhattisgarh",
"Goa",
"Gujarat",
"Haryana",
"Himachal Pradesh",
"Jharkhand",
"Karnataka",
"Kerala",
"Madhya Pradesh",
"Maharashtra",
"Manipur",
"Meghalaya",
"Mizoram",
"Nagaland",
"Odisha",
"Punjab",
"Rajasthan",
"Sikkim",
"Tamil Nadu",
"Telangana",
"Tripura",
"Uttar Pradesh",
"Uttarakhand",
"West Bengal",
],
autoSelect: true,
});
$input.change(function () {
var current = $input.typeahead("getActive");
matches = [];
if (current) {
// Some item from your input matches
// with entered data
if (current.name == $input.val()) {
matches.push(current.name);
}
}
});
</script>
</body>
</html>
Salida :
escritura anticipada automática dynamix