import { Controller } from "@hotwired/stimulus";
// TODO: Add suggest help text and aria-live
// https://accessibility.huit.harvard.edu/technique-aria-autocomplete
export default class extends Controller {
 static targets = ["query", "suggestions", "template", "item"];
 static classes = ["selected"];
 connect() {
 this.indexNumber = -1;
 this.suggestLength = 0;
 }
 disconnect() {
 this.clear();
 }
 clear() {
 this.suggestionsTarget.classList.add("hidden");
 this.suggestionsTarget.innerHTML = "";
 this.suggestionsTarget.removeAttribute("tabindex");
 this.suggestionsTarget.removeAttribute("aria-activedescendant");
 }
 hide(e) {
 // Allows adjusting the cursor in the input without hiding the suggestions.
 if (!this.queryTarget.contains(e.target)) this.clear();
 }
 next() {
 if (this.suggestLength === 0) return;
 this.indexNumber++;
 if (this.indexNumber>= this.suggestLength) this.indexNumber = 0;
 this.focusItem(this.itemTargets[this.indexNumber]);
 }
 prev() {
 if (this.suggestLength === 0) return;
 this.indexNumber--;
 if (this.indexNumber < 0) this.indexNumber = this.suggestLength - 1; this.focusItem(this.itemTargets[this.indexNumber]); } // On mouseover, highlight the item, shifting the index, // but don't change the input because it causes an undesireable feedback loop. highlight(e) { this.indexNumber = this.itemTargets.indexOf(e.currentTarget); this.focusItem(e.currentTarget, false); } choose(e) { this.clear(); this.queryTarget.value = e.target.textContent; this.queryTarget.form.submit(); } async suggest(e) { const el = e.currentTarget; const term = el.value.trim(); if (term.length>= 2) {
 el.classList.remove("autocomplete-done");
 el.classList.add("autocomplete-loading");
 const query = new URLSearchParams({ query: term });
 try {
 const response = await fetch("/api/v1/search/autocomplete?" + query, {
 method: "GET",
 });
 const data = await response.json();
 this.showSuggestions(data.slice(0, 10));
 } catch (error) {}
 el.classList.remove("autocomplete-loading");
 el.classList.add("autocomplete-done");
 } else {
 this.clear();
 }
 }
 showSuggestions(items) {
 this.clear();
 if (items.length === 0) {
 return;
 }
 items.forEach((item, idx) => this.appendItem(item, idx));
 this.suggestionsTarget.setAttribute("tabindex", 0);
 this.suggestionsTarget.setAttribute("role", "listbox");
 this.suggestionsTarget.classList.remove("hidden");
 this.suggestLength = items.length;
 this.indexNumber = -1;
 }
 appendItem(text, idx) {
 const clone = this.templateTarget.content.cloneNode(true);
 const li = clone.querySelector("li");
 li.textContent = text;
 li.id = `suggest-${idx}`;
 this.suggestionsTarget.appendChild(clone);
 }
 focusItem(el, change = true) {
 if (!el) {
 return;
 }
 this.itemTargets.forEach((el) =>
 el.classList.remove(...this.selectedClasses),
 );
 el.classList.add(...this.selectedClasses);
 this.suggestionsTarget.setAttribute("aria-activedescendant", el.id);
 if (change) {
 this.queryTarget.value = el.textContent;
 this.queryTarget.focus();
 }
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/speech" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://rubygems.org/assets/controllers/autocomplete_controller-e9f78a76.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://rubygems.org/assets/controllers/autocomplete_controller-e9f78a76.js" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech" selected="selected">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>