Anchored search button

This commit is contained in:
Neale Pickett 2019-10-26 16:05:15 -06:00
parent 0494df0227
commit 81846f007d
3 changed files with 24 additions and 2 deletions

View File

@ -15,6 +15,16 @@ body {
border-radius: 1em; border-radius: 1em;
max-width: 35em; max-width: 35em;
font-family: "Lato", "Roboto", sans-serif; font-family: "Lato", "Roboto", sans-serif;
font-size: 13pt;
}
input {
font-family: "Lato", "Roboto", sans-serif;
font-size: 13pt;
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
} }
#title, td.main { #title, td.main {
@ -97,7 +107,7 @@ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, ol + p, ul + p, pre + p, blockqu
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: bolt; font-weight: bold;
} }
pre { pre {

View File

@ -34,12 +34,23 @@ function regexInput(e) {
} }
} }
function anchorToggle(e) {
let re = document.querySelector("#regexp")
let val = re.value.replace(/^\^|\$$/g, "")
if (val == re.value) {
val = "^" + val + "$"
}
re.value = val
re.focus()
}
function init(e) { function init(e) {
fetch("words.txt") fetch("words.txt")
.then(r => r.text()) .then(r => r.text())
.then(addWords) .then(addWords)
document.querySelector("#regexp").addEventListener("input", regexInput) document.querySelector("#regexp").addEventListener("input", regexInput)
document.querySelector("#anchor").addEventListener("click", anchorToggle)
} }
window.addEventListener("load", init) window.addEventListener("load", init)

View File

@ -8,7 +8,8 @@ Ever wanted to run `grep` on `/usr/share/dict/words`,
but you only have a phone? but you only have a phone?
Me too. Me too.
<label for="regexp">Match Regex</label>: <!-- <label for="regexp">Match Regex</label>: -->
<input id="regexp" type="search" disabled="true" value="loading..."> <input id="regexp" type="search" disabled="true" value="loading...">
<button id="anchor">^$</button>
<ul id="matches"></ul> <ul id="matches"></ul>