How to add placeholder text with search icon on jQuery data tables

Question

I'm using jQuery data tables and I want to display "search" text with search icon inside search input box as placeholder. I managed add the text. Please advice me how to add placeholder image

$(document).ready(function() {
        $('#example').DataTable({
            oLanguage: {
                sSearch: ''
            },
            "aoColumnDefs":[{
                'bSortable':false, 'aTargets':[3]

            }
            ]
        });

        function InitComplete(oSettings) {
            $('#example_filter')
                    .contents()
                    .filter(function() { return this.nodeType == 3 })
                    .replaceWith('Refine search: ');
        }

        $('.dataTables_filter input').attr("placeholder", "Search");

I need to know, how to add image something like '<i class='icon-search'></i>'

Answer 1

Add

"searchPlaceholder": "search"

Ex

$('#datatable').DataTable({
        "dom": 'lCfrtip',
            "order": [],
            "colVis": {
            "buttonText": "Hiển thị",
                "overlayFade": 0,
                "align": "right"
        },
        "language": {
            "lengthMenu": '_MENU_ bản ghi trên trang',
                "search": '<i class="fa fa-search"></i>',
                "searchPlaceholder": "search",
                "paginate": {
                "previous": '<i class="fa fa-angle-left"></i>',
                    "next": '<i class="fa fa-angle-right"></i>'
            }
        }
    });

Answer 2

For make that, you can use background-image . try

UPDATE

 $(document).ready(function() { $(".searchIn").keypress(function(){ $(this).removeClass().addClass("searchOut") }) $(".searchIn").click(function(){ if(!$(this).hasClass("searchOut")) $(this).addClass("searchIn") }) $(document).on("keyup",".searchOut", function(){ if(($(this).val().length) == 0 ) $(this).removeClass().addClass("searchIn") }) }) 

 .searchIn{ background:url(https://cdn0.iconfinder.com/data/icons/basic-website/512/search-website-512.png) no-repeat scroll left center / 15px auto; } .searchOut{ background:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" class="searchIn" /> </div> 

Answer 3

you can use .css() in jquery:

$(".dataTables_filter input").css("background-image", "url('yourImageURL')");

but as you mentioned that you want to use an icon, you can use an input field with an <i> tag. using CSS you can set the position of the icon in a place that the user would think it's on the <input> tag:

the HTML could look like this :

<input type="text" id="username">
<i class='icon-search'></i>

then you have to give the icon-search a position where it can be seen inside of the input depending on where the <input> tag is positioned. sth like this:

.icon-search {
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;    
    text-align: center;  
}

Answer 4

您可以编写此代码，以便在jQuery DataTable $('#user-notification-table_filter input').attr("placeholder", "Search for users");为搜索添加占位符文本$('#user-notification-table_filter input').attr("placeholder", "Search for users");