0

Estimados tengo esta función que carga data de un json con el evento click en el button funciona bien, necesito que también lo haga con la tecla enter usando keypress, no he podido añadirle ese evento pueden ayudarme. Gracias

<form class="form">
<input class="search" type="search" name="search" id="search" required>
<input type="button" name="btnSearch" id="btnSearch" value="Buscar">
</form>

$('#btnSearch').click(function() {
    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);
    });
});

2 respuestas 2

1

Intenta con este código :

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

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

function Buscar() {
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);
});

}

Saludos,

8
  • Hola gracias por la respuesta, creo que no explique bien, necesito añadirle a la función también funcione con la tecla enter, no debo quitar el click debe funcionar con ambos eventos (click, y enter) Commented el 18 ago. 2017 a las 13:24
  • deja los dos eventos, y para que no repitas código, mueve la lógica interna hacia una funcion que llamas desde los dos eventos... Commented el 18 ago. 2017 a las 13:26
  • ok puse los 2 eventos, el problema que presento es que con el enter no muestra resultado lo que hace es refrescar la pagina y no carga data. poniendo la misma palabra, el botón si la muestra. Commented el 18 ago. 2017 a las 13:34
  • bueno, metiendo la lógica a una función ya el enter muestra la data pero sigo teniendo el problema que refresca la pagina y al refrescar borra el contenido mostrado ¿por que con el enter me refresca la pagina? Gracias Commented el 18 ago. 2017 a las 13:45
  • Prueba con preventdefault y return false; en el keypress, tal y como quedo despues de editado el codigo. Commented el 18 ago. 2017 a las 13:48
1

el Código final me quedo así, por si alguien le sirve 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;
    }
});

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.