Merge pull request pallets-eco#1728 from flask-admin/fix-search-placeholder

Fix search placeholder

Author: mrjoes

doc/changelog.rst

@@ -9,6 +9,7 @@ Changelog
 * SQLAlchemy
     * sort on multiple columns with `column_default_sort`
     * sort on related models in `column_sortable_list`
+    * show searchable fields in search input's placeholder text
     * fix: inline model forms can now also be used for models with multiple primary keys
     * support for using mapped `column_property`
 * Upgrade Leaflet and Leaflet.draw plugins, used for geoalchemy integration

examples/sqla/app.py

@@ -202,10 +202,16 @@ class PostAdmin(sqla.ModelView):
     column_labels = dict(title='Post Title')  # Rename 'title' column in list view
     column_searchable_list = [
         'title',
-        User.first_name,
-        User.last_name,
         'tags.name',
+        'user.first_name',
+        'user.last_name',
     ]
+    column_labels = {
+        'title': 'Title',
+        'tags.name': 'tags',
+        'user.first_name': 'user\'s first name',
+        'user.last_name': 'last name',
+    }
     column_filters = [
         'user',
         'title',

flask_admin/contrib/sqla/view.py

@@ -590,10 +590,10 @@ class MyModelView(BaseModelView):
                 column_labels = dict(name='Name', last_name='Last Name')
                 column_searchable_list = ('name', 'last_name')
 
-            placeholder is: "Search: Name, Last Name"
+            placeholder is: "Name, Last Name"
         """
         if not self.column_searchable_list:
-            return 'Search'
+            return None
 
         placeholders = []
 
@@ -605,7 +605,7 @@ class MyModelView(BaseModelView):
                 placeholders.append(
                     self.column_labels.get(searchable, searchable))
 
-        return 'Search: %s' % u', '.join(placeholders)
+        return u', '.join(placeholders)
 
     def scaffold_filters(self, name):
         """

flask_admin/model/base.py

@@ -1109,9 +1109,9 @@ def init_search(self):
 
     def search_placeholder(self):
         """
-            Return search placeholder.
+            Return search placeholder text.
         """
-        return 'Search'
+        return None
 
     # Filter helpers
     def scaffold_filters(self, name):

flask_admin/static/admin/css/bootstrap2/admin.css

@@ -143,3 +143,23 @@ table.filters tr td {
 .editable-input .select2-container {
     min-width: 220px;
 }
+
+[placeholder]{
+    text-overflow:ellipsis;
+}
+
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    text-overflow:ellipsis;
+}
+
+::-moz-placeholder { /* Firefox 19+ */
+    text-overflow:ellipsis;
+}
+
+:-ms-input-placeholder { /* IE 10+ */
+    text-overflow:ellipsis;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+    text-overflow:ellipsis;
+}

flask_admin/static/admin/css/bootstrap3/admin.css

@@ -108,3 +108,23 @@ body.modal-open {
 {
     overflow-x: auto;
 }
+
+[placeholder]{
+    text-overflow:ellipsis;
+}
+
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    text-overflow:ellipsis;
+}
+
+::-moz-placeholder { /* Firefox 19+ */
+    text-overflow:ellipsis;
+}
+
+:-ms-input-placeholder { /* IE 10+ */
+    text-overflow:ellipsis;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+    text-overflow:ellipsis;
+}

flask_admin/templates/bootstrap2/admin/model/layout.html

@@ -58,7 +58,7 @@
     <div class="clearfix"></div>
 {% endmacro %}
 
-{% macro search_form(input_class="span2") %}
+{% macro search_form(input_class=None) %}
 <form method="GET" action="{{ return_url }}" class="search-form">
     {% for flt_name, flt_value in filter_args.items() %}
     <input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
@@ -72,17 +72,17 @@
     {% if sort_desc %}
     <input type="hidden" name="desc" value="{{ sort_desc }}">
     {% endif %}
+    {%- set full_search_placeholder = _gettext('Search') %}
+    {%- if search_placeholder %}{% set full_search_placeholder = [full_search_placeholder, search_placeholder] | join(": ") %}{% endif %}
     {% if search %}
     <div class="input-append">
-            <input type="text" name="search" value="{{ search }}" class="{{ input_class }}" placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
+            <input type="search" name="search" class="input-xlarge{% if input_class %} {{ input_class }}{% endif %}" value="{{ search }}" placeholder="{{ full_search_placeholder }}">
             <a href="{{ clear_search_url }}" class="clear add-on">
                 <i class="fa fa-times icon-remove"></i>
             </a>
     </div>
     {% else %}
-    <div>
-        <input type="text" name="search" value="" class="{{ input_class }}" placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
-    </div>
+    <input type="search" name="search" class="input-xlarge{% if input_class %} {{ input_class }}{% endif %}" value="" placeholder="{{ full_search_placeholder }}">
     {% endif %}
 </form>
 {% endmacro %}

flask_admin/templates/bootstrap3/admin/model/layout.html

@@ -58,7 +58,7 @@
     <div class="clearfix"></div>
 {% endmacro %}
 
-{% macro search_form(input_class="col-md-2") %}
+{% macro search_form(input_class=None) %}
 <form method="GET" action="{{ return_url }}" class="navbar-form navbar-left" role="search">
     {% for flt_name, flt_value in filter_args.items() %}
     <input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
@@ -72,14 +72,18 @@
     {% if sort_desc %}
     <input type="hidden" name="desc" value="{{ sort_desc }}">
     {% endif %}
+    {%- set full_search_placeholder = _gettext('Search') %}
+    {%- set max_size = config.get('FLASK_ADMIN_SEARCH_SIZE_MAX', 100) %}
+    {%- if search_placeholder %}{% set full_search_placeholder = [full_search_placeholder, search_placeholder] | join(": ") %}{% endif %}
+    {%- set input_size = [[full_search_placeholder | length, 30] | max, max_size] | min %}
     {% if search %}
     <div class="input-group">
-        <input type="text" name="search" value="{{ search }}" class="{{ input_class }} form-control" placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
+        <input type="search" name="search" value="{{ search }}" class="form-control{% if input_class %} {{ input_class }}{% endif %}" size="{{ input_size }}" placeholder="{{ full_search_placeholder }}">
         <a href="{{ clear_search_url }}" class="input-group-addon clear"><span class="fa fa-times glyphicon glyphicon-remove"></span></a>
     </div>
     {% else %}
     <div class="form-group">
-        <input type="text" name="search" value="" class="{{ input_class }} form-control" placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
+        <input type="search" name="search" value="" class="form-control{% if input_class %} {{ input_class }}{% endif %}" size="{{ input_size }}" placeholder="{{ full_search_placeholder }}">
     </div>
     {% endif %}
 </form>