This autocomplete widget for gene query provides suggestions while you type a gene symbol or name into the field. Here the gene suggestions are displayed as "<Symbol>:<Name>", automatically triggered when at least two characters are entered into the field.
At the backend, this widget is powered by the gene query web service from MyGene.info. By default, the gene suggestions display human genes only. We will enable additional customization options soon to allow queries against other species and more.
To use this widget in your own website is very easy, just following these three steps:
Copy/paste this line into your html file:
Add "mygene_query_target" class to your target input element:
<input id="gene_query" style="width:250px" class="mygene_query_target">
so that we know which input field to enable autocomplete.
Define your own callback function, which is triggered after user selects a gene. For example:
As shown in above example, you can access the gene object as ui.item:
ui.item.id gene id ui.item.value gene symbol ui.item.label the label displayed in autocomplete dropdown list
Note: if you don't define your own callback function (like the minimal HTML page below), the default behavior is to display an alert msg with the gene selected. To change this default behavior, you must overwrite with your own callback function (keep the same name as "mygene_query_select_callback").
A minimal HTML page with autocomplete enabled looks just like this (See it in action here):
Have fun! And send us feedback at email@example.com.