Al hacer clic en el campo de entrada, no quiero mostrar ni mostrar todas las opciones o la lista. Solo quiero mostrar mientras ingreso solo texto.
<!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <label for="browser">Choose your country:</label> <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Australia"> <option value="USA"> <option value="Inda"> <option value="Bhutan"> <option value="Thailand"> <option value="Canada"> <option value="Japan"> <option value="China"> <option value="France"> </datalist> </body> </html>Puede agregar un detector de eventos de input que agregue el atributo de list cuando el usuario escriba en el campo. La id de la datalist de datos se puede almacenar en un atributo de datos.
$('input').on('input', function(){ const input = $(this) if(input.val().length > 0){ input.attr('list', input.data('list')); } else { input.removeAttr('list'); } }) <!DOCTYPE html> <html> <body> <label for="browser">Choose your country:</label> <input data-list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Australia"> <option value="USA"> <option value="Inda"> <option value="Bhutan"> <option value="Thailand"> <option value="Canada"> <option value="Japan"> <option value="China"> <option value="France"> </datalist> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </body> </html>