Typahead stuff

This commit is contained in:
Shadowfacts 2017-05-09 19:14:44 -04:00
parent 5bbfe714d0
commit 0b4db89d4b
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
3 changed files with 90 additions and 37 deletions

View File

@ -39,14 +39,14 @@
</li> </li>
</ul> </ul>
<div class="form-inline my-2 my-lg-0"> <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>
</div> </div>
</nav> </nav>
</header> </header>
<div class="dropdown-menu" id="search-results"></div>
<div class="main-content container"> <div class="main-content container">
{{ content }} {{ content }}
</div> </div>
@ -78,6 +78,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <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/tether.min.js"></script>
<script src="/js/bootstrap.min.js"></script> <script src="/js/bootstrap.min.js"></script>
<script src="/js/typeahead.js"></script>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>
</html> </html>

View File

@ -1,34 +1,5 @@
$(document).ready(() => { let searchData;
$("[data-toggle='tooltip']").tooltip(); function getSearchData() {
$("#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(""));
});
});
let searchData;
function getSearchData() {
if (searchData) { if (searchData) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
resolve(searchData); resolve(searchData);
@ -37,7 +8,80 @@ $(document).ready(() => {
return fetch("/search.json") return fetch("/search.json")
.then(res => res.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").typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: "search",
source: matcher
});
// 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 // Source: https://github.com/forrestthewoods/lib_fts

8
js/typeahead.js Normal file

File diff suppressed because one or more lines are too long