Sneat template gives facility to search any 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 src/assets/json/ folder.
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 |
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();
});
}
});
}