¿Cómo crear una búsqueda dinámica de autocompletar usando Bootstrap Typeahead?

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

Publicación traducida automáticamente

Artículo escrito por faizamu19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *