Sometime back I was playing around with dynamic HTML and cam across a tutorial that described how to implement the dynamic suggestion feature that is commonly found on many websites (such as Google and Amazon). This set me wondering how I could use this mechanism to dynamically depict a SMILES string as I type it.

I whipped a quick example at here. The code is quite simple and makes good use of the REST services that I have written. The depiction service uses the CDK. By constructing a URL of the form

http://www.chembiogrid.org/cheminfo/rest/depict/c1ccccc1C(=O)CN(C)(C)

you get a PNG depiction of the molecule at the end of the URL. So it’s pretty easy to get depictions simply by manipulating the URL.

The application starts with an HTML page containing a form

1
2
3
4
5
6
7
8
9
10
<form id="frmSearch" action="http://so.me.url./action.py">

  <input type="text"

               id="txtSearch"

               name="txtSearch"

               alt="Search Criteria"

               onkeyup="getImage();"

               autocomplete="off" />

  <div id="search_suggest">

  </div>

</form>

We need to set the

of the

element so that we can get the value of the field via Javascript. But the key thing here is the value of the

attribute that is set to the name of a Javascript function. So, whenever we press a key in the input field, this function will be called. Finally, the

will hold the 2D depiction based on the contents of the input field. (Note that the action URL in this example is imaginary, since we’re not really concerned with what we do with the final SMILES)

The remaining component is the Javascript function:

1
2
3
4
5
6
function getImage() {

  var str = escape(document.getElementById('txtSearch').value);

  var depicturl = 'http://www.chembiogrid.org/cheminfo/rest/depict/' + str;

  var ss = document.getElementById('search_suggest');

  ss.innerHTML = "<img border="0" alt="" />";

}

When this function is called, we get the current value of the

field (via it’s

attribute) and then construct the URL from which we can get the image. We then get the

element and set its HTML to an

element whose

attribute is the REST URL that we just constructed. As a result, when the browser displays the

, it will automatically retrieve the 2D depiction from the URL.

There are some drawbacks to this application. First, if the network is slow, the depictions are slow to show. Second, there’s no real warning if you have an invalid SMILES. In general, it will try to represent the SMILES rather than complain. This can lead to some strange depictions. But, it’s a toy so I don’t know how useful it is in general. However, it’s cute since it lets you play with SMILES and see the results in real time.