Estoy tratando de crear un cuadro de búsqueda que muestre sugerencias tan pronto como el usuario comience a escribir en la barra de búsqueda. Al usar select2 , muestra sugerencias de forma predeterminada, incluso cuando el usuario no escribe nada en el cuadro de búsqueda. Ya que tengo gran no. de opciones que no quiero que se muestren todas de forma predeterminada. Debe mostrarse solo cuando coincida con el usuario que escribe en el cuadro de búsqueda.
<html> <head> <title>Using Select2</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Select2 CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> </head> <body> <div class="jumbotron"> <div class="container bg-danger"> <div class="col-md-6"> <label>Multiple Select2</label> <select id="multiple" class="js-states form-control" multiple> <option>Java</option> <option>Javascript</option> <option>PHP</option> <option>Visual Basic</option> </select> </div> </div> </div> <!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Select2 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <script> $("#multiple").select2({ placeholder: "Select a programming language", allowClear: true }); </script> </body> </html>Puede establecer la opción minimumInputLength de la configuración de select2:
$("#multiple").select2({ placeholder: "Select a programming language", allowClear: true, minimumInputLength: 2 });Ahora las opciones solo aparecerán después de que el usuario haya escrito al menos 2 caracteres.