Laravel Search

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

Introduction

Vuexy 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": "ti-home-2",
      "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:

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