highlight search field by having the focus

highlight search field by having the focus

silenssilens Posts: 101Questions: 40Answers: 0

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();
                });
            },

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    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

  • silenssilens Posts: 101Questions: 40Answers: 0

    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>"); });
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    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

  • silenssilens Posts: 101Questions: 40Answers: 0

    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

  • silenssilens Posts: 101Questions: 40Answers: 0

    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');
                             }
                
        });
    
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    That will do - thanks for posting back!

    Allan

This discussion has been closed.