Laravel Search

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


Introduction

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

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 public/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:

{
  "pages": [
    {
      "name": "Dashboard eCommerce",
      "icon": "ri-home-7-line",
      "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 resources/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();
      });
    }
  });
}
© 2017- Pixinvent, Hand-crafted & Made with ❤️