0.0.7 • Published 3 years ago
@geneontology/wc-go-autocomplete v0.0.7
GO Autocomplete Web Component
The GO Autocomplete is a Web Component to quickly find genes and terms used in GO http://geneontology.org/. It is used in the GO ribbon sandbox to help users find their genes of interest. Try the GO ribbon here: http://geneontology.org/ribbon.html
Getting Started
Script tag
- Put a script tag
<script src='https://unpkg.com/@geneontology/wc-go-autocomplete/dist/wc-go-autocomplete.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
<html>
<head>
<script type="module" src="https://unpkg.com/@geneontology/wc-go-autocomplete/dist/wc-go-autocomplete/wc-go-autocomplete.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@geneontology/wc-go-autocomplete/dist/wc-go-autocomplete/wc-go-autocomplete.js"></script>
</head>
<body>
<wc-go-autocomplete id="ac"></wc-go-autocomplete>
<!-- You can also listen to the selection of an item from the autocomplete -->
<script>
let elt = document.getElementById("ac");
document.addEventListener("itemSelected", (evt) => {
console.log("item selected: ", evt.detail);
});
</script>
</body>
</html>Node Modules
- Run
npm install wc-go-autocomplete --save - Put a script tag similar to this
<script src='node_modules/@geneontology/wc-go-autocomplete/dist/wc-go-autocomplete.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Additional note
The GO Autocomplete Web Component is powered by the GO API http://api.geneontology.org/{:target="blank"}