Set focus on search box and detect enter key

giulichajari

I tried this
http://live.datatables.net/hoduyawo/1/edit

But my datatable is on a modal form:

    <table id="resultadomodal" class="display nowrap">

     <thead>
     </thead>
        <tbody>

        </tbody>
       </table>


         $(document).ready(function() {

 $.ajax({

        type: "POST",
        url: "../gestionn/views/modules/articulo/filtroP.php",
        data: { "tf": "todos"}, 
        dataType: "json",
        error: function(){
            alert("error petición ajax");
        },
        success: function(data){
             t=  $('#resultadomodal').DataTable({

         data:data,
            columnDefs: [
            { type: "num", symbols:"$" , targets: 3 }
          ],

      columns: [
      {data:"codalfa", title: "COD.:" },
      {"data": "nombre", title: "NOMBRE" },
      {"data": "marca", title: "MARCA" },
      {"title": "P/U" ,  render: function (data, type, row,meta) {
        return '<label class="editable">$ '+row.precio+'</label>';
       } },
      {"data": "detalle", title: "CAT.:" },
       {"data": "subcategoria", title: "SUBCAT.:" },
        {  title:"CANT",
          data:null,
            render: function (data, type, row,meta) {
        return "<input type='text' style='width:50px;' name='"+row.idproducto+"' class='cantidad' value='1' tabindex='3' 
        placeholder='cant'/>"

        }},
            {  title:"AGREGAR",
          data:null,
            render: function (data, type, row,meta) {
        return "<a  class='btn btn-primary' onclick='agregarProducto("+row.idproducto+");' name='agregar' >+</a>"

           }}
      ], 



          language:{
                    "sProcessing":     "Procesando...",
                    "sLengthMenu":     "Mostrar _MENU_ registros",
                    "sZeroRecords":    "No se encontraron resultados",
                    "sEmptyTable":     "Ningún dato disponible en esta tabla",
                    "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                    "sInfoPostFix":    "",
                    "sSearch":         "Buscar:",
                    "sUrl":            "",
                    "sInfoThousands":  ",",
                    "sLoadingRecords": "Cargando...",
                    "oPaginate": {
                        "sFirst":    "Primero",
                        "sLast":     "Último",
                        "sNext":     "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                    },

           responsive: true });

           $('#resultadomodal_filter label input').focus();
            },
           });

        });

Probably i will have to create a filter field manually?

colin

Hi @giulichajari ,

It should still work - maybe on an event when the form is shown or some such. Without seeing it in motion it's hard to advise.

Cheers,

Colin

giulichajari

Hello @colin also i want to go to quantity edit by clicking enter on the filter field, so the user can search and then go to add to the cart:

         $('#resultadomodal').on( 'draw.dt', function () {

                $('#resultadomodal_filter input').on('keypress', function(event){

                if (event.keyCode ===13){

                  $('.cantidad:first').focus();
                 }
              });} );

and it works perfectly.
But writting:

      $('#resultadomodal_filter label input').focus(); 

inside the event above doesn't focus on input

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin