improves search field

README.md

@@ -284,7 +284,7 @@ The autocomplete field will call a custom api at every keyup event. Such api rec
 In order to activate this functionality you should add the BATON configuration:
 
 
-You should provide the results length and the data as an array of objects which must contain the `label` and `url` keys. The `icon` key is optional.
+You should provide the results length and the data as an array of objects which must contain the `label` and `url` keys. The `icon` key is optional and is treated as css class given to an `i` element.
 
 Let's see an example:
 

baton/static/baton/app/src/core/Menu.js

@@ -132,8 +132,8 @@ let Menu = {
       }
     }
 
-    field.on('blur', () => dataList.empty())
-    field.on('focus', () => field.trigger('keyup', { keyCode: 39 }))
+    field.on('blur', e => setTimeout(() => dataList.hide(), 150))
+    field.on('focus', e => dataList.show())
     field.on('keyup', e => {
       var code = e.keyCode || e.which
 
@@ -162,7 +162,7 @@ let Menu = {
             container.removeClass('loading')
             dataList.empty()
             data.data.forEach((r, index) => dataList.append(`
-              <div class="datalist-option${index === 0 ? ' selected' : ''}" data-url="${r.url}"><span>${r.label}</span>${r.icon ? '<i class="' + r.icon + '"></i>' : ''}</div>`)
+              <div class="datalist-option${index === 0 ? ' selected' : ''}" onclick="location.href='${r.url}'" data-url="${r.url}"><a href="${r.url}">${r.label}</a>${r.icon ? `<i onclick="location.href='${r.url}'" class="${r.icon}"></i>` : ''}</div>`)
             )
           })
           .fail((jqxhr, textStatus, err) => {

baton/static/baton/app/src/styles/_menu.scss

@@ -153,6 +153,11 @@ body:not(.menu-mobile) {
       border-color: $search-field-input-border-color;
       color: $search-field-color;
       padding-right: 30px;
+
+      &:focus {
+        box-shadow: 0 0 0 transparent;
+        outline: 0 none;
+      }
     }
 
     &::after {
@@ -191,7 +196,18 @@ body:not(.menu-mobile) {
         padding: .5rem;
 
         &.selected {
-          background: lighten($search-field-datalist-bg, 5%);
+          background: $search-field-selected-bg;
+          color: $search-field-selected-color;
+
+          a {
+            color: $search-field-selected-color;
+          }
+
+        }
+
+        a {
+          color: $search-field-link-color;
+          text-decoration: none;
         }
 
         i {

baton/static/baton/app/src/styles/_variables.scss

@@ -64,6 +64,9 @@ $search-field-input-border-color: $menu-bg;
 $search-field-color: $menu-color;
 $search-field-datalist-bg: darken($menu-bg, 5%);
 $search-field-icon-color: lighten(#007eed, 25%);
+$search-field-link-color: #fff;
+$search-field-selected-bg: lighten($menu-bg, 20%);
+$search-field-selected-color: #fff;
 
 // dashboard
 $dashboard-bg: #f5f5f5;

docs/configuration.rst

@@ -336,7 +336,7 @@ The autocomplete field will call a custom api at every keyup event. Such api rec
         ]
     }
 
-You should provide the results length and the data as an array of objects which must contain the ``label`` and ``url`` keys. The ``icon`` key is optional.
+You should provide the results length and the data as an array of objects which must contain the ``label`` and ``url`` keys. The ``icon`` key is optional and is treated as css class given to an ``i`` element.
 
 Let's see an example: ::
 

testapp/app/app/views.py

@@ -20,6 +20,7 @@ def admin_search(request):
         res.append({
             'label': 'Lucio Dalla Wikipedia',
             'url': 'https://www.google.com',
+            'icon': 'fab fa-wikipedia-w'
         })
     return JsonResponse({
         'length': len(res),