highlight search field by having the focus

silens

I would like that when I click on a field in the table and this field appears in the table search, this search engine will be highlighted in some way, changing the color for example

"initComplete": function (settings, json) {//Hace una busqueda haciendo click sobre el campo
                var api = this.api();
                api.$('td').not(" :nth-child(1),:nth-child(7), :nth-child(9)").click(function () {
                    $( ".input" ).css( "border", "3px solid red" );
                    api.search(this.innerHTML).draw();
                });
            },

kthorngren

Interesting idea. I think if you change the selector to something like this it should work:
$( ".dataTables_filter input" ).css( "border", "3px solid red" );

Kevin

silens

Thank you very much it works very well, the problem I have is when the entry is deleted, I do not know how to leave it as it was. I do not know what css to put

    tblVisitas.on( 'search.dt', function () { //Dispara evento de busqueda.
            if(tblVisitas.search()!=""){
                $( ".dataTables_filter input" ).css( "border", "3px solid red" );
            }
            else
            {
            
                     I do not know what to put here 
                       $( ".dataTables_filter input" ).css( "border", "1px solid black" );  
            }
            $(".filterInfo").html("<h4> <span class='modal-title label label-default'>Sus busqueda: "+tblVisitas.search() + "</span></h4>");
    });

allan

If the entry is deleted, I'm not clear on why you would want to leave it as it was. Would you not remove it?

Allan

silens

What I want to say is that when I erase the field, I have to remove the color css that I have put before. If the field has no text, it does not have to have color modification. and I do not know what to do to restore his status

silens

Lo he solucionado de esta forma. Muchas gracias @allan

tblVentas.on( 'search.dt', function () { 
    if(tblVentas.search()!=""){
        $( ".dataTables_filter input" ).css({'color':'white','background':'#C62A2A'});
                
            }
            else
            {
                $( ".dataTables_filter input" ).css('background-color', 'white');
                         }
            
    });

allan

That will do - thanks for posting back!

Allan