Browse Source

Typahead stuff

master
Shadowfacts 5 years ago
parent
commit
0b4db89d4b
Signed by: shadowfacts GPG Key ID: 94A5AB95422746E5
  1. 7
      _layouts/default.html
  2. 114
      js/main.js
  3. 8
      js/typeahead.js

7
_layouts/default.html

@ -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>

114
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

8
js/typeahead.js

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save