Fix #2189

Example: https://jsfiddle.net/djhvscf/e3nk137y/7586/

CHANGELOG.md

@@ -22,6 +22,7 @@ ChangeLog
 - feat(multiple-selection-row extension): add multiple-selection-row extension
 - feat(filter-control extension): fix #1540, disable unnecessary/unused values from select options
 - feat(filter-control extension): fix #2448, create a css file which contains the style for this extension
+- feat(filter-control extension): fix #2189, set placeholder of the filter-control input
 
 #### Breaking changes in 1.11.1
 - **Filter-Control extension**: deleted the inline-style and now this extension is using a separated css file.

src/extensions/filter-control/README.md

@@ -65,6 +65,11 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 * description: Set to true if you want to use the starts with search mode.
 * default: `false`
 
+### filterControlPlaceholder
+* type: String
+* description: Set this in order to show a placeholder only in the input filter control.
+* default: ``
+
 ### Icons
 * clear: 'glyphicon-trash icon-clear'
 

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -257,7 +257,7 @@
                 if (column.searchable && that.options.filterTemplate[nameControl]) {
                     addedFilterControl = true;
                     isVisible = 'visible';
-                    html.push(that.options.filterTemplate[nameControl](that, column.field, isVisible));
+                    html.push(that.options.filterTemplate[nameControl](that, column.field, isVisible, column.filterControlPlaceholder));
                 }
             }
 
@@ -430,8 +430,8 @@
         filterShowClear: false,
         alignmentSelectControlOptions: undefined,
         filterTemplate: {
-            input: function (that, field, isVisible) {
-                return sprintf('<input type="text" class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s">', field, isVisible);
+            input: function (that, field, isVisible, placeholder) {
+                return sprintf('<input type="text" class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s" placeholder="%s">', field, isVisible, placeholder);
             },
             select: function (that, field, isVisible) {
                 return sprintf('<select class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s" dir="%s"></select>',
@@ -450,7 +450,8 @@
         filterData: undefined,
         filterDatepickerOptions: undefined,
         filterStrictSearch: false,
-        filterStartsWithSearch: false
+        filterStartsWithSearch: false,
+        filterControlPlaceholder: ""
     });
 
     $.extend($.fn.bootstrapTable.Constructor.EVENTS, {