Materialize template gives facility to search page and directly go to that page on click.
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.
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 |
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();
});
}
});
}