Search
We have two type of search.
- Main Search
- Bookmark Search
We are using a JSON file to store all search list. You can find
these JSON files in the data/ folder. We are using
same JSON file for both search.
Here is the path:
resources/data/template-search.json
How to add New Search
You'll need to add your page details in JSON files
to appear on search.
{"name":"eCommerce Dashboard", "url":"dashboard/ecommerce","icon":"bx bx-desktop"},
Rendering Search
We are rendering our search in the
navbar.blade.php file.
Main search
<-------Main search------->
<li class="nav-item nav-search">
<a class="nav-link nav-link-search"><i class="ficon bx bx-search"></i></a>
<div class="search-input">
<div class="search-input-icon"><i class="bx bx-search primary"></i></div>
<input class="input" type="text" placeholder="Explore Frest..." tabindex="-1" data-search="template-search">
<div class="search-input-close"><i class="bx bx-x"></i></div>
<ul class="search-list"></ul>
</div>
</li>
Bookmark search
<-------Bookmark search------->
<ul class="nav navbar-nav">
<li class="nav-item d-none d-lg-block"><a class="nav-link bookmark-star"><i class="ficon bx bx-star warning"></i></a>
<div class="bookmark-input search-input">
<div class="bookmark-input-icon"><i class="bx bx-search primary"></i></div>
<input class="form-control input" type="text" placeholder="Explore Frest..." tabindex="0"
data-search="template-search">
<ul class="search-list"></ul>
</div>
</li>
</ul>
Search Methods
You can find the search methods in app.js file.
/********************* Bookmark & Search ***********************/
// This variable is used for mouseenter and mouseleave events of search list
var $filename = $(".search-input input").data("search")
// Bookmark icon click
$(".bookmark-wrapper .bookmark-star").on("click", function (e) {
e.stopPropagation()
$(".bookmark-wrapper .bookmark-input").toggleClass("show")
$(".bookmark-wrapper .bookmark-input input").val("")
$(".bookmark-wrapper .bookmark-input input").blur()
$(".bookmark-wrapper .bookmark-input input").focus()
$(".bookmark-wrapper .search-list").addClass("show")
var arrList = $("ul.nav.navbar-nav.bookmark-icons li"),
$arrList = "",
$activeItemClass = ""
$("ul.search-list li").remove()
for (var i = 0; i < arrList.length; i++) {
if (i===0) {
$activeItemClass="current_item"
}
else {
$activeItemClass=""
}
$arrList +='<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer '
+$activeItemClass + '">' + '<a class="d-flex align-items-center justify-content-between w-100" href='
+arrList[i].firstChild.href + ">" + '<div class="d-flex justify-content-start">' + '<span class="mr-75 '
+arrList[i].firstChild.firstChild.className + '" data-icon="' + arrList[i].firstChild.firstChild.className
+ '"></span>' + "<span>" + arrList[i].firstChild.dataset.originalTitle + "</span>" + "</div>"
+ '<span class="float-right bookmark-icon bx bx-star warning"></span>' + "</a>"
+ "</li>" }
$("ul.search-list").append($arrList)
})
// Navigation Search area Open
$(".nav-link-search").on("click", function () {
var $this = $(this)
var searchInput = $(this)
.parent(".nav-search")
.find(".search-input")
searchInput.val('');
searchInput.addClass("open")
$(".search-input input").focus()
$(".search-input .search-list li").remove()
$(".search-input .search-list").addClass("show")
$(".bookmark-wrapper .bookmark-input").removeClass("show")
})
// Navigation Search area Close
$(".search-input-close i").on("click", function () {
var $this = $(this),
searchInput = $(this).closest(".search-input")
if (searchInput.hasClass("open")) {
searchInput.removeClass("open")
$(".search-input input").val("")
$(".search-input input").blur()
$(".search-input .search-list").removeClass("show")
if ($(".app-content").hasClass("show-overlay")) {
$(".app-content").removeClass("show-overlay")
}
}
})
// Navigation Search area Close on click of app-content
$(".app-content").on("click", function () {
var $this = $(".search-input-close"),
searchInput = $($this).parent(".search-input")
if (searchInput.hasClass("open")) {
searchInput.removeClass("open")
}
})
// Filter
$(".search-input .input").on("keyup", function (e) {
if (e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 13) {
if (e.keyCode == 27) {
$(".app-content").removeClass("show-overlay")
$(".bookmark-input input").val("")
$(".bookmark-input input").blur()
$(".search-input input").val("")
$(".search-input input").blur()
$(".search-input").removeClass("open")
if ($(".search-list").hasClass("show")) {
$(this).removeClass("show")
$(".search-input").removeClass("show")
}
}
// Define variables
var value = $(this)
.val()
.toLowerCase(), //get values of input on keyup
activeClass = "",
bookmark = false,
liList = $("ul.search-list li") // get all the list items of the search
liList.remove()
// To check if current is bookmark input
if (
$(this)
.parent()
.hasClass("bookmark-input")
) {
bookmark = true
}
// If input value is blank
if (value != "") {
$(".app-content").addClass("show-overlay")
// condition for bookmark and search input click
if ($(".bookmark-input").focus()) {
$(".bookmark-input .search-list").addClass("show")
} else {
$(".search-input .search-list").addClass("show")
$(".bookmark-input .search-list").removeClass("show")
}
if (bookmark === false) {
$(".search-input .search-list").addClass("show")
$(".bookmark-input .search-list").removeClass("show")
}
var $startList = "",
$otherList = "",
$htmlList = "",
$activeItemClass = "",
$bookmarkIcon = "",
a = 0
// getting json data from file for search results
$.getJSON("/data/" + $filename + ".json", function (
data
) {
for (var i = 0; i < data.listItems.length; i++) {
// if current is bookmark then give class to star icon
if (bookmark === true) {
activeClass = "" // resetting active bookmark class
var arrList = $("ul.nav.navbar-nav.bookmark-icons li"),
$arrList = ""
// Loop to check if current seach value match with the bookmarks already there in navbar
for (var j = 0; j < arrList.length; j++) {
if (
data.listItems[i].name ===
arrList[j].firstChild.dataset.originalTitle
) {
activeClass = " warning"
break
} else {
activeClass = ""
}
}
$bookmarkIcon =
'<span class="float-right bookmark-icon bx bx-star' +
activeClass +
'"></span>'
}
// Search list item start with entered letters and create list
if (
data.listItems[i].name.toLowerCase().indexOf(value) == 0 &&
a < 10
) {
if (a === 0) {
$activeItemClass = "current_item"
} else {
$activeItemClass = ""
}
$startList +=
'<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer ' +
$activeItemClass +
'">' +
'<a class="d-flex align-items-center justify-content-between w-100" href=' +
assetPath + data.listItems[i].url +
">" +
'<div class="d-flex justify-content-start">' +
'<span class="mr-75 ' +
data.listItems[i].icon +
'" data-icon="' +
data.listItems[i].icon +
'"></span>' +
"<span>" +
data.listItems[i].name +
"</span>" +
"</div>" +
$bookmarkIcon +
"</a>" +
"</li>"
a++
}
}
for (var i = 0; i < data.listItems.length; i++) {
if (bookmark === true) {
activeClass = "" // resetting active bookmark class
var arrList = $("ul.nav.navbar-nav.bookmark-icons li"),
$arrList = ""
// Loop to check if current seach value match with the bookmarks already there in navbar
for (var j = 0; j < arrList.length; j++) {
if (
data.listItems[i].name ===
arrList[j].firstChild.dataset.originalTitle
) {
activeClass = " warning"
} else {
activeClass = ""
}
}
$bookmarkIcon =
'<span class="float-right bookmark-icon bx bx-star' +
activeClass +
'"></span>'
}
// Search list item not start with letters and create list
if (
!(data.listItems[i].name.toLowerCase().indexOf(value) == 0) &&
data.listItems[i].name.toLowerCase().indexOf(value) > -1 &&
a < 10
) {
if (a === 0) {
$activeItemClass = "current_item"
} else {
$activeItemClass = ""
}
$otherList +=
'<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer ' +
$activeItemClass +
'">' +
'<a class="d-flex align-items-center justify-content-between w-100" href=' +
assetPath + data.listItems[i].url +
">" +
'<div class="d-flex justify-content-start">' +
'<span class="mr-75 ' +
data.listItems[i].icon +
'" data-icon="' +
data.listItems[i].icon +
'"></span>' +
"<span>" +
data.listItems[i].name +
"</span>" +
"</div>" +
$bookmarkIcon +
"</a>" +
"</li>"
a++
}
}
if ($startList == "" && $otherList == "") {
$otherList =
'<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer">' +
'<a class="d-flex align-items-center justify-content-between w-100">' +
'<div class="d-flex justify-content-start">' +
'<span class="mr-75 bx bx-error-circle"></span>' +
"<span>No results found.</span>" +
"</div>" +
"</a>" +
"</li>"
}
$htmlList = $startList.concat($otherList) // merging start with and other list
$("ul.search-list").html($htmlList) // Appending list to <ul>
})
} else {
if (bookmark === true) {
var arrList = $("ul.nav.navbar-nav.bookmark-icons li"),
$arrList = ""
for (var i = 0; i < arrList.length; i++) {
if (i === 0) {
$activeItemClass = "current_item"
} else {
$activeItemClass = ""
}
$arrList +=
'<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer">' +
'<a class="d-flex align-items-center justify-content-between w-100" href=' +
arrList[i].firstChild.href +
">" +
'<div class="d-flex justify-content-start">' +
'<span class="mr-75 ' +
arrList[i].firstChild.firstChild.className +
'" data-icon="' +
arrList[i].firstChild.firstChild.className +
'"></span>' +
"<span>" +
arrList[i].firstChild.dataset.originalTitle +
"</span>" +
"</div>" +
'<span class="float-right bookmark-icon bx bx-star warning"></span>' +
"</a>" +
"</li>"
}
$("ul.search-list").append($arrList)
} else {
// if search input blank, hide overlay
if ($(".app-content").hasClass("show-overlay")) {
$(".app-content").removeClass("show-overlay")
}
// If filter box is empty
if ($(".search-list").hasClass("show")) {
$(".search-list").removeClass("show")
}
}
}
}
})
// Add class on hover of the list
$(document).on("mouseenter", ".search-list li", function (e) {
$(this)
.siblings()
.removeClass("current_item")
$(this).addClass("current_item")
})
$(document).on("click", ".search-list li", function (e) {
e.stopPropagation()
})
$("html").on("click", function ($this) {
if (!$($this.target).hasClass("bookmark-icon")) {
if ($(".bookmark-input .search-list").hasClass("show")) {
$(".bookmark-input .search-list").removeClass("show")
}
if ($(".bookmark-input").hasClass("show")) {
$(".bookmark-input").removeClass("show")
}
}
})
// Favorite star click
$(document).on(
"click",
".bookmark-input .search-list .bookmark-icon",
function (e) {
e.stopPropagation()
if ($(this).hasClass("warning")) {
$(this).removeClass("warning")
var arrList = $("ul.nav.navbar-nav.bookmark-icons li")
for (var i = 0; i < arrList.length; i++) {
if (
arrList[i].firstChild.dataset.originalTitle ==
$(this).parent()[0].innerText
) {
arrList[i].remove()
}
}
e.preventDefault()
} else {
var arrList = $("ul.nav.navbar-nav.bookmark-icons li")
$(this).addClass("warning")
e.preventDefault()
var $url = $(this).parent()[0].href,
$name = $(this).parent()[0].innerText,
$icon = $(this).parent()[0].firstChild.firstChild.dataset.icon,
$listItem = "",
$listItemDropdown = ""
$listItem =
'<li class="nav-item d-none d-lg-block">' +
'<a class="nav-link" href="' +
$url +
'" data-toggle="tooltip" data-placement="top" title="' +
$name +
'">' +
'<i class="ficon ' +
$icon +
'"></i>' +
"</a>" +
"</li>"
$("ul.nav.bookmark-icons").append($listItem)
$('[data-toggle="tooltip"]').tooltip()
}
}
)
// If we use up key(38) Down key (40) or Enter key(13)
$(window).on("keydown", function (e) {
var $current = $(".search-list li.current_item"),
$next,
$prev
if (e.keyCode === 40) {
$next = $current.next()
$current.removeClass("current_item")
$current = $next.addClass("current_item")
} else if (e.keyCode === 38) {
$prev = $current.prev()
$current.removeClass("current_item")
$current = $prev.addClass("current_item")
}
if (e.keyCode === 13 && $(".search-list li.current_item").length > 0) {
var selected_item = $(".search-list li.current_item a")
window.location = selected_item.attr("href")
$(selected_item).trigger("click")
}
})