0

Estimados par no hacer largo los post, ya se solucione el tema del keypress en otro post, lo que necesito ahora es que la función del keypress se ejecute cuando inserten 3 caracteres en el input dejo el código con la función como quedo, creo que puedo usar lenght y luego ejecutar la función tengo la idea pero no me sale, puden darme una mano gracias.

function Cargardata () {
	var searchField = $('#search').val();
    var myExp = new RegExp(searchField, 'i');

    $.getJSON('/books-schema.json', function(data) {
        var output = '<ul id="resultado">';

        $.each(data.data, function(key, item) {
            if ((item.title.search(myExp) != -1) || (item.teaser.search(myExp) != -1)) {
                output += '<li>';
                output += '<span class="image"><img src=' + item.image + '/></span>';
                output += '<span class="title">' + '<h3>' + item.title + '</h3>' + '</span>';
                output += '<span class="description">' + '<p>' + item.teaser + '</p>' + '</span>';
                output += '</li>';
            }
        });
        output += '</ul>';
        $('content').html(output);
    });

}

$('#btnSearch').click(function() {
    Cargardata();
});

$('#search').keypress(function(e) {
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode == '13') {
        Cargardata();
        return false;
    }
});

3 respuestas 3

1

Suponiendo que #serch es tu input text debería funcionar si lo haces justo como dices, comparando su longitud

function Cargardata () {
	var searchField = $('#search').val();
    var myExp = new RegExp(searchField, 'i');

    $.getJSON('/books-schema.json', function(data) {
        var output = '<ul id="resultado">';

        $.each(data.data, function(key, item) {
            if ((item.title.search(myExp) != -1) || (item.teaser.search(myExp) != -1)) {
                output += '<li>';
                output += '<span class="image"><img src=' + item.image + '/></span>';
                output += '<span class="title">' + '<h3>' + item.title + '</h3>' + '</span>';
                output += '<span class="description">' + '<p>' + item.teaser + '</p>' + '</span>';
                output += '</li>';
            }
        });
        output += '</ul>';
        $('content').html(output);
    });

}

$('#btnSearch').click(function() {
    Cargardata();
});

$('#search').keypress(function(e) {
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode == '13') {
        if($(this).val().length > 3){
$("#elSpan").text("");
        Cargardata();
        return false;
       } else {
        //Aquí le pones el mensaje al <span> 
$("#elSpan").text("Ingrese mínimo tres caracteres");
}
    }
});

6
  • Hola User, tu codigo tiene errores y no permite ser probado. Puedes arreglarlo? Recuerda añadir una explicacion de cómo funciona el codigo. Un saludo
    – lois6b
    Commented el 18 ago. 2017 a las 14:40
  • tu código funciono lo hace tal cual pero quiero enviar un alert cuando no cumple la condición de 3 caracteres como le agrego el alert mas abajo hice la modificación pero no salio ayuda por favor. Commented el 18 ago. 2017 a las 15:16
  • Mmmm no te lo recomendaría. El código ese se ejecuta cada vez que presionas una tecla, por lo tanto MINIMO te van a salir un par de alertas antes de que sea válido. Y eso está muy mal, pues sería super enfadoso para el usuario escribir la primera letra y que salga un alert, escribir la segunda y que salga otro alert... Sí me doy a entender? Commented el 18 ago. 2017 a las 15:51
  • como le indicaría al usuario que tiene que poner los 3 caracteres mínimo? esta funcionando pero no sabe, que tiene que poner 3 caracteres para que salgan resultados. Commented el 18 ago. 2017 a las 16:47
  • Puedes poner un placeholder en el input que le indique que debe teclear mínimo tres caracteres para la búsqueda Commented el 18 ago. 2017 a las 17:10
1

Pues solo consulta el tamaño de tu cadena, podrías agregar el evento keyup para entenderlo mejor

$('#search').keyup(function(e) {
  if($(this).val().length>3){
    alert("mas de 3");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">

1
  • creo que deberia ser >2 la comprobacion si quiere que el mensaje sea al introducir el 3er caracter, basada en el titulo de la pregunta "al tercer caracter insertado" (no al cuarto)
    – lois6b
    Commented el 18 ago. 2017 a las 14:39
0

Utilizando el evento keypress quedaria asi

 $('#search').keypress(function(e){
 var length = $(this).val().length;
  if(length >= 2){
    console.log('Do stuff')
  }
});

puesto que el evento keypress hace la comprobacion con el movimiento de down y up del teclado completo, por eso la comprobacion va con el valor 2, para una implementación diferente puedes probar con keydown https://api.jquery.com/keydown/

1
  • 1
    Hola Oscar, bienvenido a Stack Overflow en español. Esta respuesta es casi igual a la ya anteriormente respondida por parte de Shassain..él usa un keyup y tu un keypress... Intenta editarla para que sea algo distinto o y asi no tener publicaciones repetidas. Y considera usar snippets de codigo para que el autor pueda probar tu solucion. Un saludo
    – lois6b
    Commented el 18 ago. 2017 a las 14:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.