@geneontology/wc-go-autocomplete

Autocomplete Web Component for GO

Usage no npm install needed!

<script type="module">
  import geneontologyWcGoAutocomplete from 'https://cdn.skypack.dev/@geneontology/wc-go-autocomplete';
</script>

README

Built With Stencil

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"}