Typahead stuff
This commit is contained in:
parent
5bbfe714d0
commit
0b4db89d4b
|
@ -39,14 +39,14 @@
|
|||
</li>
|
||||
</ul>
|
||||
<div class="form-inline my-2 my-lg-0">
|
||||
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search">
|
||||
<input id="search" class="typeahead form-control mr-sm-2" type="text" placeholder="Search">
|
||||
<!-- <a href="#" id="search-results-trigger" data-toggle="dropdown"></a>
|
||||
<div class="dropdown-menu" id="search-results"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="dropdown-menu" id="search-results"></div>
|
||||
|
||||
<div class="main-content container">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
@ -78,6 +78,7 @@
|
|||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="/js/tether.min.js"></script>
|
||||
<script src="/js/bootstrap.min.js"></script>
|
||||
<script src="/js/typeahead.js"></script>
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
112
js/main.js
112
js/main.js
|
@ -1,43 +1,87 @@
|
|||
let searchData;
|
||||
function getSearchData() {
|
||||
if (searchData) {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(searchData);
|
||||
});
|
||||
} else {
|
||||
return fetch("/search.json")
|
||||
.then(res => res.json());
|
||||
}
|
||||
}
|
||||
|
||||
function matcher(q, cb) {
|
||||
getSearchData()
|
||||
.then(data => {
|
||||
cb(Object.keys(data)
|
||||
.map(fuzzy_match.bind(null, q))
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 5)
|
||||
.map(res => {
|
||||
const formatted = res[3];
|
||||
const url = data[res[2]];
|
||||
return `<a href="${url}">${formatted}</a>`;
|
||||
}));
|
||||
})
|
||||
}
|
||||
|
||||
$(document).ready(() => {
|
||||
$("[data-toggle='tooltip']").tooltip();
|
||||
|
||||
$("#search").on("input", () => {
|
||||
const results = $("#search-results");
|
||||
const q = $("#search").val().trim();
|
||||
|
||||
|
||||
if (q.length == 0) {
|
||||
results.hide();
|
||||
return;
|
||||
} else {
|
||||
results.show();
|
||||
}
|
||||
|
||||
getSearchData()
|
||||
.then(data => {
|
||||
results.html(Object.keys(data)
|
||||
.map(fuzzy_match.bind(null, q))
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 5)
|
||||
.map(res => {
|
||||
const formatted = res[3];
|
||||
const url = data[res[2]];
|
||||
return `<a href="${url}" class="dropdown-item">${formatted}</a>`;
|
||||
})
|
||||
.join(""));
|
||||
});
|
||||
$("#search").typeahead({
|
||||
hint: true,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
}, {
|
||||
name: "search",
|
||||
source: matcher
|
||||
});
|
||||
|
||||
let searchData;
|
||||
function getSearchData() {
|
||||
if (searchData) {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(searchData);
|
||||
});
|
||||
} else {
|
||||
return fetch("/search.json")
|
||||
.then(res => res.json());
|
||||
}
|
||||
}
|
||||
// let dropdownShown = false;
|
||||
// $("#search-results-trigger").on("shown.bs.dropdown", () => {
|
||||
// console.log("shown");
|
||||
// dropdownShown = true;
|
||||
// });
|
||||
// $("#search-results-trigger").on("hidden.bs.dropdown", () => {
|
||||
// console.log("hidden");
|
||||
// dropdownShown = false;
|
||||
// });
|
||||
|
||||
// $("#search").on("input", () => {
|
||||
// const results = $("#search-results");
|
||||
// const q = $("#search").val().trim();
|
||||
|
||||
// if (q.length == 0) {
|
||||
// if (dropdownShown) {
|
||||
// $("#search-results-trigger").dropdown("toggle");
|
||||
// $("#search").focus();
|
||||
// }
|
||||
// // results.hide();
|
||||
// return;
|
||||
// } else {
|
||||
// if (!dropdownShown) {
|
||||
// $("#search-results-trigger").dropdown("toggle");
|
||||
// $("#search").focus();
|
||||
// }
|
||||
// // results.show();
|
||||
// }
|
||||
|
||||
// getSearchData()
|
||||
// .then(data => {
|
||||
// results.html(Object.keys(data)
|
||||
// .map(fuzzy_match.bind(null, q))
|
||||
// .sort((a, b) => b[1] - a[1])
|
||||
// .slice(0, 5)
|
||||
// .map(res => {
|
||||
// const formatted = res[3];
|
||||
// const url = data[res[2]];
|
||||
// return `<a href="${url}" class="dropdown-item">${formatted}</a>`;
|
||||
// })
|
||||
// .join(""));
|
||||
// });
|
||||
// });
|
||||
});
|
||||
|
||||
// Source: https://github.com/forrestthewoods/lib_fts
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue