Django Search

Sneat 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

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:

The reason to put it this is to keep the format proper in search model

{
  "navigation": {
    "Apps": [
      {
        "name": "Transactions",
        "icon": "bx-data",
        "url": "/transactions/list/"
      },
      {
        "name": "Invoice Edit",
        "icon": "bx-pencil",
        "url": "/app/invoice/edit/"
      },
      {
        "name": "Invoice Add",
        "icon": "bx-user-plus",
        "url": "/app/invoice/add/"
      }
    ],
    "Pages": [
      {
        "name": "User Profile",
        "icon": "bx-user-circle",
        "url": "/pages/profile/user/"
      },
      {
        "name": "User Profile - Teams",
        "icon": "bx-group",
        "url": "/pages/profile/teams/"
      },
      {
        "name": "Create Deal Wizard",
        "icon": "bx-gift",
        "url": "/wizard_ex/create_deal/"
      }
    ],
    "Any new section": [
    {...}
    ]
  },
  "suggestions": {
      "Popular Searches": [
        {
          "name": "Analytics",
          "icon": "bx-home-circle",
          "url": "/"
        },
        {
          "name": "CRM",
          "icon": "bx-shape-circle",
          "url": "/dashboard/crm/"
        },
      ],
      "Apps & Pages": [
        {
          "name": "Calendar",
          "icon": "bx-calendar",
          "url": "/app/calendar/"
        },
        {
          "name": "Invoice List",
          "icon": "bx-list-ol",
          "url": "/app/invoice/list/"
        },
      ],
  }
}

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