diff options
author | Ben Burwell <ben@benburwell.com> | 2019-07-28 18:52:38 -0400 |
---|---|---|
committer | Ben Burwell <ben@benburwell.com> | 2019-07-28 19:45:13 -0400 |
commit | 0c6d39354b86626badf6b6e11c14935833cb009d (patch) | |
tree | a21aba4475bbba2d3fbfe3ca6d522477505248b7 /templates/beerpage.jinja2 | |
parent | 7b1364cd7a565561efe0208c89195abd34645484 (diff) |
Fuzzy search
Diffstat (limited to 'templates/beerpage.jinja2')
-rw-r--r-- | templates/beerpage.jinja2 | 120 |
1 files changed, 0 insertions, 120 deletions
diff --git a/templates/beerpage.jinja2 b/templates/beerpage.jinja2 index 662196f..9f6bf2b 100644 --- a/templates/beerpage.jinja2 +++ b/templates/beerpage.jinja2 @@ -35,17 +35,6 @@ } </script> - <nav class="navbar navbar-dark bg-info mb-3"> - <a class="navbar-brand" href="/">similar.beer</a> - <form class="form-inline" action="/search" method="post"> - <div class="autocomplete" style="width:300px;"> - <input id="myInput" class="form-control mr-sm-2 typeahead" type="search" name="q" placeholder="Search Beers" aria-label="Search"> - </div> - <button class="btn btn-secondary my-2 my-sm-0" type="submit">Go</button> - </form> - <a href="/random" class="btn btn-secondary my-2 my-sm-0">Random Beer!</a> - </nav> - <div id="title" class="text-center"> <h2>{{ beer_data.brewer if beer_data != None else 'DELICOUS BREWER' }}</h2> <h2>{{ beer_data.name if beer_data != None else 'DELICOUS BEER' }}</h2> @@ -256,113 +245,4 @@ </table> {% endif %} -<script> -(function() { - - fetch('/all_beers.json') - .then(res => res.json()) - .then(names => { - autocomplete(document.getElementById("myInput"), names); - }) - - function autocomplete(inp, arr) { - /*the autocomplete function takes two arguments, - the text field element and an array of possible autocompleted values:*/ - var currentFocus; - /*execute a function when someone writes in the text field:*/ - inp.addEventListener("input", function(e) { - var a, b, i, val = this.value; - /*close any already open lists of autocompleted values*/ - closeAllLists(); - if (!val) { return false;} - currentFocus = -1; - /*create a DIV element that will contain the items (values):*/ - a = document.createElement("DIV"); - a.setAttribute("id", this.id + "autocomplete-list"); - a.setAttribute("class", "autocomplete-items"); - /*append the DIV element as a child of the autocomplete container:*/ - this.parentNode.appendChild(a); - /*for each item in the array...*/ - for (i = 0; i < arr.length; i++) { - /*check if the item starts with the same letters as the text field value:*/ - if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { - /*create a DIV element for each matching element:*/ - b = document.createElement("DIV"); - /*make the matching letters bold:*/ - b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>"; - b.innerHTML += arr[i].substr(val.length); - /*insert a input field that will hold the current array item's value:*/ - b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; - /*execute a function when someone clicks on the item value (DIV element):*/ - b.addEventListener("click", function(e) { - /*insert the value for the autocomplete text field:*/ - inp.value = this.getElementsByTagName("input")[0].value; - /*close the list of autocompleted values, - (or any other open lists of autocompleted values:*/ - closeAllLists(); - }); - a.appendChild(b); - } - } - }); - /*execute a function presses a key on the keyboard:*/ - inp.addEventListener("keydown", function(e) { - var x = document.getElementById(this.id + "autocomplete-list"); - if (x) x = x.getElementsByTagName("div"); - if (e.keyCode == 40) { - /*If the arrow DOWN key is pressed, - increase the currentFocus variable:*/ - currentFocus++; - /*and and make the current item more visible:*/ - addActive(x); - } else if (e.keyCode == 38) { //up - /*If the arrow UP key is pressed, - decrease the currentFocus variable:*/ - currentFocus--; - /*and and make the current item more visible:*/ - addActive(x); - } else if (e.keyCode == 13) { - /*If the ENTER key is pressed, prevent the form from being submitted,*/ - e.preventDefault(); - if (currentFocus > -1) { - /*and simulate a click on the "active" item:*/ - if (x) x[currentFocus].click(); - } - } - }); - function addActive(x) { - /*a function to classify an item as "active":*/ - if (!x) return false; - /*start by removing the "active" class on all items:*/ - removeActive(x); - if (currentFocus >= x.length) currentFocus = 0; - if (currentFocus < 0) currentFocus = (x.length - 1); - /*add class "autocomplete-active":*/ - x[currentFocus].classList.add("autocomplete-active"); - } - function removeActive(x) { - /*a function to remove the "active" class from all autocomplete items:*/ - for (var i = 0; i < x.length; i++) { - x[i].classList.remove("autocomplete-active"); - } - } - function closeAllLists(elmnt) { - /*close all autocomplete lists in the document, - except the one passed as an argument:*/ - var x = document.getElementsByClassName("autocomplete-items"); - for (var i = 0; i < x.length; i++) { - if (elmnt != x[i] && elmnt != inp) { - x[i].parentNode.removeChild(x[i]); - } - } -} -/*execute a function when someone clicks in the document:*/ -document.addEventListener("click", function (e) { - closeAllLists(e.target); -}); -} - - -})() - </script> {% endblock %} |