npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ols-autocomplete

v0.0.91

Published

This widget is a standalone autocomplete search widget for the Ontology Lookup Service (OLS) provided by the EMBL-EBI.

Downloads

68

Readme

Introduction to OLS-autocomplete

This is a standalone widget for people to include the OLS autocomplete widget and search box within their own homepage. The widget can be seen in action at the start page of the Ontology Lookup Service (OLS).

PLEASE MAKE SURE YOU USE HTTPS INSTEAD OF HTTP URLS IN THE FUTURE FOR EBI WEBSERVICE CALLS

How to install the plugin

There are multiple ways to install the plugin:

  • Download the javascript file (ols-autocomplete.js) stored in the 'build' folder. Include the file by using normal script tags. See the example html pages for more information
  • The plugin in is available as npm module - search for ols-autocomplete or use this link
  • The widget is listed on the bio.js website where you could find other interesting .js libraries for biological data

How to start the plugin

To be able to use the widget, you have to include an html field with some additional information. After the html is set up, the start of the widget in javascript is rather simple. Please check the example in the folder for more information.

HTML

<input style="font-weight: normal" size="35" type="text" name="q" data-olswidget="select" data-olsontology="" data-selectpath="https://www.ebi.ac.uk/ols/" olstype="" id="local-searchbox" placeholder="Enter the term you are looking for" class="ac_input"></input>
  • data-olswidget: The potential values are 'select' or 'multisearch', which leads to different handling of the input. Please check the example to see the difference
  • data-olsontology: This can be an empty string '' or can narrow the search for suggestions down to a certain ontology.
  • data-selectpath: Stores the base url for the interaction with the webservice. In almost all cases, this is going to be https://www.ebi.ac.uk/ols/
  • (data-olstype:)

Javascript

To start the plugin, the widget has to be required, an instance has to be Initialized and the plugin then started.

<script>
$(document).ready(function() {
  var app = require("ols-autocomplete");
  var instance = new app();
  instance.start()
});
</script>

Dependencies

  • JQuery: Has to be available when you want to include the plugin (https://jquery.com)
  • handlebars: Is used, so make sure you include it in your script tags (http://handlebarsjs.com/)
  • typeahead: Also, the plugin uses typeahead (https://github.com/twitter/typeahead.js/) so make sure you include it as well Check the examples for correct script tags and links to relevant CDNs. Of course can also host the libs locally and adjust the script tags accordingly

Contact

Please use github to report bugs, discuss potential new features or ask questions in general.

License

The plugin is released under the Apache License Version 2.0. You can find out more about it at http://www.apache.org/licenses/LICENSE-2.0 or within the license file of the repository.

If you are interested in this plugin...

...you might also want to have a look at

  • the ols-treeview package, see github or npm
  • the ols-graphview package as well, see Github or npm