Update results as you type

This commit is contained in:
Daoud Clarke 2021-12-16 21:36:01 +00:00
parent 23eb341832
commit af29b4c039
5 changed files with 76 additions and 11 deletions

4
app.py
View file

@ -1,3 +1,5 @@
import logging
import uvicorn
import create_app
@ -8,6 +10,8 @@ from paths import INDEX_PATH
tiny_index = TinyIndex(Document, INDEX_PATH, NUM_PAGES, PAGE_SIZE)
app = create_app.create(tiny_index)
logging.basicConfig()
if __name__ == "__main__":
uvicorn.run("app:app", host="127.0.0.1", port=8000, log_level="info")

View file

@ -1,3 +1,4 @@
from logging import getLogger
from typing import List
import Levenshtein
@ -8,22 +9,17 @@ from starlette.staticfiles import StaticFiles
from index import TinyIndex, Document
logger = getLogger(__name__)
def create(tiny_index: TinyIndex):
app = FastAPI()
@app.get("/search")
def search(s: str):
results = get_results(s)
doc = ""
for result in results:
doc += f'<p><a href="{result.url}">{result.title}</a></p>\n'
return HTMLResponse(doc)
# if '—' in s:
# url = s.split('—')[1].strip()
# else:
# url = f'https://www.google.com/search?q={s}'
# return RedirectResponse(url)
logger.info("Return results: %r", results)
return results
def order_results(query, results: List[Document]):
ordered_results = sorted(results, key=lambda result: Levenshtein.distance(query, result.title))

View file

@ -5,12 +5,17 @@
type="application/opensearchdescription+xml"
title="Stoatally Different"
href="http://localhost:8000/plugin.xml">
<script src="/index.js"></script>
</head>
<body>
Stoatally different.
<form action="/search">
<input type="search" name="s" />
<input type="search" id="search" name="s" />
</form>
<div id="results">
</div>
</body>
</html>

42
static/index.js Normal file
View file

@ -0,0 +1,42 @@
window.onload = (event) => {
const searchInput = document.getElementById('search');
searchInput.addEventListener('keyup', (e) => {
console.log(searchInput.value);
const encodedValue = encodeURIComponent(searchInput.value);
fetch('/search?s=' + encodedValue).then(response => {
clearResults();
console.log(response);
response.json().then(content => {
console.log(content);
content.forEach(element => {
addResult(element.title, element.url);
})
});
});
});
};
function clearResults() {
const results = document.getElementById('results');
results.innerHTML = '';
}
function addResult(title, url) {
const par = document.createElement("p");
const link = document.createElement("a");
const linkText = document.createTextNode(title);
link.appendChild(linkText);
link.href = url;
par.appendChild(link);
const results = document.getElementById('results');
results.appendChild(par);
}

18
static/search.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search results</title>
</head>
<body>
<div id="remote">
<form action="/search">
<input class="typeahead" type="search" placeholder="Search" name="s">
<!--<input type="search" name="s" />-->
</form>
</div>
</body>
</html>