Django Search

Vuexy template gives facility to search any page and directly go to that page on click.

Introduction

As this template provides vertical & horizontal layout options, We are using search-[vertical|horizontal].json file for search list. You can find this file inside src/assets/json/ folder.

JSON List

Heads Up! : In search-[vertical|horizontal].json file, takes only the url path.

Now, Let's have a look at how to update the array list of this file. You can update this file list as per your requirements. In search list, we are adding pages, files & members. All the page path and image URLs should be updated as per your requirements.

Below is the format of an item:

{
  "pages": [
    {
      "name": "Dashboard eCommerce",
      "icon": "bx-home-circle",
      "url": "dashboards-ecommerce"
    },
    {...}
  ],
  "files": [
    {
      "name": "Class Attendance",
      "subtitle": "By Tommy Shelby",
      "src": "img/icons/misc/search-xls.png",
      "meta": "17kb",
      "url": "javascript:;"
    },
    {...}
  ],
  "members": [
    {
      "name": "John Doe",
      "subtitle": "Admin",
      "src": "img/avatars/1.png",
      "url": "/app/user/view/account/"
    },
    {...}
  ]
}

Following is the details of all json list items:

Attribute	Details
name	Using which name you want to search this page.
icon	Icon you want to show before the page name. We have used feather svg icons so using only icon name here.
url	URL of the page
subtitle	To display subtitle for files & members
src	Source image path for files & members
meta	To display meta size of the files

Methods

We have implemented our search method in src/assets/js/main.js file.

// ! Removed following code if you do't wish to use jQuery. Remember that navbar search functionality will stop working on removal.
if (typeof $ !== 'undefined') {
  $(function () {
    ...
    ...
      searchInput.on('keyup', function () {
        psSearch.update();
      });
    }
  });
}