PubChem Autocomplete Widget


What is the Autocomplete Widget?back to top

PubChem Autocomplete Widget is a tool to suggest a list of terms when you type an input in a search field. It uses the suffix array algorithm. The input text could appear in either the beginning or the middle of the suggested terms. The suggested term can be retrieved from the dictionaries listed below.

The PubChem Autocomplete widget works with both jQuery and ExtJS. It can easily be embedded into your own HTML page by following the three simple steps outlined below. A subsequent section of this document provides examples of the widget with jQuery, the widget with ExtJS, and the backend to retrieve the autocomplete terms.

(Additional widgets, which provide rapid displays of commonly requested PubChem data summaries, are also available and are described in a separate file.)

Dictionaries used by the Autocomplete Widget:back to top

compound | MeSH | ChEBI | assay | gene | protein target | protein subfamily | taxonomy | pathway | assay source | substance source

Names Dictionary Description
Compound pc_compoundnames Chemical names provided by PubChem depositors.
Generally, this dictionary contains synonyms that have been used by at least two depositors of PubChem Substance records for the same chemical structure (including connectivity, isotopes and stereochemistry). These appear as "depositor-supplied synonyms" in the corresponding PubChem Compound record.
The synonyms are ranked by an algorithm that is described in the PubChem Compound/Substance summary page help document. The scoring algorithm gives priority to synonyms that are frequently used and easily readable. As an example of readability, a name such as ibuprofen is shown before chemical names such as 2-[4-(2-methylpropyl)phenyl]propanoic acid. The synonyms suggested by autocomplete are sorted in descending order of their score.
MeSH pc_meshnames Medical Subject Headings (MeSH) that have been associated with PubChem Substance and Compound records, including terms from the MeSH tree branch for "Chemicals and Drugs," as well as chemical names from the MeSH Supplementary Concept Records (SCR). (The PubChem Classification Browser help document provides additional details.)
ChEBI pc_chebinames The European Bioinformatics Institute (EBI)'s Chemical Entities of Biological Interest (ChEBI) is a freely available dictionary of molecular entities focused on "small" chemical compounds. It maintains an ontology of terms used to describe the small molecules, and includes relevant terms in their deposited substance records. (The PubChem Classification Browser help document provides additional details.)
Assay pc_assaynames A compendium of names associated with PubChem BioAssay records, including assay titles, assay categories, names of data sources, cited publications, protein targets, protein families, and taxonomic names of the source organisms for the protein targets.
Gene pc_genenames All gene names associated with bioassays, including the names of gene targets tested by the assays, and the names of genes whose protein targets were tested by the assays.
Protein target pc_targetnames Names of all protein targets in the PubChem BioAssay database.
Protein subfamily pc_cddnames Protein subfamily names in Conserved Domain Database(CDD) that have been annotated onto the protein targets that have been tested in PubChem BioAssays.
Taxonomy pc_taxonomynames All taxonomic names related to bioassays, representing the source organisms of gene/protein targets tested by the assays.
Pathway pc_biosystemsnames The names of biochemical pathways from the BioSystems database that (a) contain compounds found to be active in PubChem BioAssays, and/or (b) include protein targets that have been tested by BioAssays. (The Biosystems Help document provides additional details about the method used to associate compounds and the method used to associate proteins with pathways.)
Assay source pc_assaysourcenames Names of all the data sources that have deposited assays into the PubChem BioAssay database.
Substance source pc_substancesourcenames Names of all the data sources that have deposited small molecules into the PubChem Substance database.

Test dictionaries:

Input text:


How to use the Autocomplete Widget in your html page:back to top

To embed PubChem Autocomplete Widget in your own HTML page, simply follow these 3 steps:

  1. Include the PubChem javascript libraries and cascading style sheets in the <head> of your html page:

  2. jQuery version:
          <link type="text/css" href="//pubchem.ncbi.nlm.nih.gov/jquery/jquery-ui-1.8.23.scroll.min.css" rel="stylesheet" />
          <script type="text/javascript" src="//pubchem.ncbi.nlm.nih.gov/jquery/jquery-1.8.0.min.js"></script>
          <script type="text/javascript" src="//pubchem.ncbi.nlm.nih.gov/jquery/jquery-ui-1.8.23.multiselect.min.js"></script>
        
    ExtJS version:
          <script type='text/javascript'>Ext = {buildSettings:{"scopeResetCSS":true }};</script>
          <script type='text/javascript' src='//pubchem.ncbi.nlm.nih.gov/widget/extjs-4.1.1/ext-all.js'></script>
          <script type='text/javascript' src='//pubchem.ncbi.nlm.nih.gov/widget/1.0.2.1b/pubchem.widgets.js'></script>
          <link rel="stylesheet" type="text/css" href="//pubchem.ncbi.nlm.nih.gov/widget/extjs-4.1.1/resources/css/ext-all-gray-scoped.css">
        

  3. Position the widget with an html div

  4. jQuery version for either <textarea> or <input type="text">:
          <div class="ui-widget">
              <textarea name="chemicals" rows="5" cols="100"></textarea>
          </div>
    
          or
    
          <div class="ui-widget">
              <input type="text" name="chemicals" style="width:400px;"/>
          </div>
        
    The widget will be rendered inside of the div.

    ExtJS version for <input type="text">:
          <div id="chemicalsdiv"></div>
        
    The widget will be rendered inside of the div. Note that the id of the div must be specified by the divid argument below.

  5. Initialize the widget with desired parameters:

  6. jQuery version:
          <script type="text/javascript">
            jQuery(document).ready(function() {
                PubChemJQuery.pcautocp({
                    dictionary: "pc_compoundnames",
                    fieldname: "chemicals",
                    multiSelect: true
                });
            });
          </script>
        
    ExtJS version:
          <script type="text/javascript">
            Ext.onReady(function() {
                PubChem.pcautocp({
                    dictionary: 'pc_compoundnames',
                    divid: 'chemicalsdiv',
                    fieldname: 'chemicals',
                    multiSelect: true
                });
            });
          </script>
        

    Parameters for both jQuery and ExtJS versions:
    Parameter with default valueRequiredDescription
    dictionary: 'pc_compoundnames'Yesname of the autocomplete dictionary
    fieldid: 'field id'Yes/Noid of the input field, either use fieldid or fieldname
    fieldname: ''Yes/Noname of the input field, either use fieldid or fieldname
    maxcount: 20Nomaximum returned terms
    minLength: 2Nominimum length of chars before starting the autocomplete
    addquote: falseNoindicate whether to put a pair of double quotes around the selected term. If the term contains double quotes, no double quotes will be added even "addquote" is true.
    multiSelect: falseNodisplay multiple items in the field
    separator: '; 'Noseparator used to separate terms. available if "multiSelect: true".
    Parameters for jQuery version only:
    adjustmenuwidth: 0Noadjust the width of the suggestion menu
    menuheight: 250Noheight of the suggestion menu
    fontsize: '1em'Nofont size of the suggested terms
    Parameters for ExtJS version only:
    divid: 'div id'Yesid of the div containing the input field
    width: 600Nowidth of the input field

Examplesback to top

Autocomplete with jQuery

PubChem Compound Names:

Autocomplete with ExtJS

PubChem Compound Names:

Autocomplete backend

A typical backend call to retrieve the autocomplete terms is //pubchem.ncbi.nlm.nih.gov/pcautocp/pcautocp.cgi?dict=pc_compoundnames&q=aspirin&n=20&callback=?. Only the parameters "dict" and "q" are required. All the rest are optional. "dict" is the dictionary name as listed at the Dictionary section. "q" is the input text. "n" is the maximum returned terms with a default value of 20. The parameter "callback" is used to support JSONP.


Log of Changes to PubChem Autocomplete Widgetback to top

29 MAY 2013 A new dictinary ChEBI is added.
The matched input is highlighted in the suggested terms.
09 APR 2013 The pubchem.widgets.js file has been updated to version 1.0.2.1b, in order to accommodate improvements in the graphical filters and carousel widget, along with bug fixes. The updated javascript file can now be used by all of the various types of widgets.
21 MAR 2013 The pubchem.widgets.js file has been updated to version 1.0.2b, in order to accommodate the newly released carousel widget, and can now be used by all of the various types of widgets (including the PubChem Autocomplete Widget documented in this file).
08 NOV 2012 Initial release of PubChem Autocomplete Widget

Revised 30 May 2013