如何在 jQuery 数据表上添加带有搜索图标的占位符文本答案

【问题标题】：How to add placeholder text with search icon on jQuery data tables如何在 jQuery 数据表上添加带有搜索图标的占位符文本
【发布时间】：2015-12-08 09:26:43
【问题描述】：

我正在使用 jQuery 数据表，我想在搜索输入框中显示带有搜索图标的“搜索”文本作为占位符。我设法添加了文本。请告诉我如何添加占位符图片

$(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 class='icon-search'></i>' 这样的图像

【问题讨论】：

在input 上方使用'cover' 块，以模仿placeholder。这会给你更多的控制 - 就像这里gyazo.com/d94e99df0a576fe4b55e89b340bc242f
你试过我的解决方案了吗？

标签： javascript jquery css datatables

【解决方案1】：

添加

"searchPlaceholder": "search"

前

$('#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>'
            }
        }
    });

【讨论】：

【解决方案2】：

为此，您可以使用background-image。试试

更新

$(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>

【讨论】：

我想把图片做成占位符

【解决方案3】：

您可以在 jquery 中使用 .css()：

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

但正如您提到的要使用图标，您可以使用带有<i> 标记的输入字段。使用 CSS，您可以将图标的位置设置在用户认为它在 <input> 标签上的位置：

HTML 可能如下所示：

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

然后您必须根据<input> 标记的位置，为图标搜索提供一个可以在输入内部看到的位置。像这样的……

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

【讨论】：

【解决方案4】：

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

【讨论】：