JQuery UI widget for gene query autocomplete

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.

This widget is powered by "" web service. By default, the gene suggestions are limited to human genes only. You can customize it to allow queries against other species.

To use this widget in your own website is very easy, just following this example (or, play with this jsFiddle example):

    <link rel="stylesheet" href="" type="text/css" media="all" />
    <script src="" type="text/javascript"></script>
    <script src="" type="text/javascript"></script>
    <script src="" type="text/javascript"></script>
<body class="ui-widget">
    <label for="gene_query">Enter a gene here: </label>
    <input id="gene_query" style="width:250px" class="mygene_query_target">
    <script type="text/javascript">

To define your own callback function:

<script type="text/javascript">
        select: function(event, ui) {
                    alert( ui.item ?
                        "Selected: " + ui.item.label + '('+ui.item._id+')':
                        "Nothing selected, input was " + this.value);

To customized this widget to fit your need, you can refer to options/events listed for the original JQueryUI autocomplete widget. Besides them, there are some additional options specific to this widget only (with their default values):

    "mygene_url": "",
    "q": "(symbol:{term} OR symbol: {term}* OR name:{term}* OR alias: {term}* OR summary:{term}*)",
    "species": "human",
    "fields": "name,symbol,taxid,entrezgene",
    "limit": 20,
    "gene_label": "{symbol}: {name}",
    "value_attr": "symbol",