The source code refers to this demo, but I can't seem to get that to run directly. When I copy/paste that into my own project I end up with (more or less) this:
<html>
<head><script src="main.js" defer></script></head>
<link href="autocomplete.css" rel="stylesheet" />
<body></body>
</html>
goog.module('Main');
const TagName = goog.require("goog.dom.TagName");
const {ArrayMatcher, AutoComplete, InputHandler, Renderer} = goog.require("goog.ui.ac");
const {createDom} = goog.require("goog.dom");
/**
* The entry point.
*/
function Main() {
console.log("Running");
const inp = createDom(TagName.INPUT, {'type': "text"});
document.body.appendChild(inp);
// Copyed from https://github.com/google/closure-library/blob/master/closure/goog/ui/ac/ac.js
const matcher = new ArrayMatcher(["hello", "world"], true);
const renderer = new Renderer(inp);
const inputHandler = new InputHandler(null, null, false);
const autoComplete = new AutoComplete(matcher, renderer, inputHandler);
inputHandler.attachAutoComplete(autoComplete);
inputHandler.attachInputs(inp);
console.log("Finished", renderer.getElement());
}
document.addEventListener("DOMContentLoaded", Main);
What that ends up doing is basically tab-completion: if I type he<tab> I get hello. But I don't get the expected list of potential completions popping up.
Digging around in the debugger, I can see it doing DOM manipulations and creating stuff that looks like it's supposed to be a list-of-option-element, but nothing is visible in the browser.
- Am I misusing something?
- Am I missing something? (E.g. some more CSS files I'm supposed to be using?)
- Am I using the wrong widget?
- Is the fact I need to do this as part of a Bazel build messing me up some how?