PubChem Autocomplete Widget
- What is the PubChem Autocomplete Widget?
- How to use PubChem Autocomplete Widget in your html page
- Include the PubChem javascript libraries and cascading style sheets in the <head> of your html page
- Position the widget with an html div
- Initialize the widget with desired parameters
- Examples
- Log of Changes to the Autocomplete Widget
What is the Autocomplete Widget?
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:
| compound | MeSH | 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.) |
| 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: |
How to use the Autocomplete Widget in your html page:
To embed PubChem Autocomplete Widget in your own HTML page, simply follow these 3 steps:
- Include the PubChem javascript libraries and cascading style sheets in the <head> of your html page:
- Position the widget with an html div
- Initialize the widget with desired parameters:
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.0b/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">
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.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 value | Required | Description |
|---|---|---|
| dictionary: 'pc_compoundnames' | Yes | name of the autocomplete dictionary |
| fieldid: 'field id' | Yes/No | id of the input field, either use fieldid or fieldname |
| fieldname: '' | Yes/No | name of the input field, either use fieldid or fieldname |
| maxcount: 20 | No | maximum returned terms |
| minLength: 2 | No | minimum length of chars before starting the autocomplete |
| addquote: false | No | indicate 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: false | No | display multiple items in the field |
| separator: '; ' | No | separator used to separate terms. available if "multiSelect: true". |
| Parameters for jQuery version only: | ||
| adjustmenuwidth: 0 | No | adjust the width of the suggestion menu |
| menuheight: 250 | No | height of the suggestion menu |
| fontsize: '1em' | No | font size of the suggested terms |
| Parameters for ExtJS version only: | ||
| divid: 'div id' | Yes | id of the div containing the input field |
| width: 600 | No | width of the input field |
Examples
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 Widget
| 08 NOV 2012 | Initial release of PubChem Autocomplete Widget |
| Revised 08 November 2012 |