jquery contains: get 1st instance of
<p>I have a table with the following rows:</p>

<ul>
<li>apple</li>
<li>basket</li>
<li>peach</li>
<li>ball</li>
<li>brine</li>
<li>apron</li>
<li>car</li>
<li>cook</li>
<li>pear</li>
<li>plum</li>
<li>choke</li>
</ul>

<p>I have create a timer solution where the user can start typing a partial word and I would like to be able to highlight that row of data.</p>

<p>I was able get some information by doing the following:</p>

<pre><code>console.log($('#' + ListBoxVal + ' tr:contains("' + filterString + '")'));
</code></pre>

<p>However, when I type the letter "c" for example I get the following results:</p>

<ul>
<li>peach</li>
<li>car</li>
<li>choke</li>
<li>cook</li>
</ul>

<p>Really what I would want is to change the css on the very first instance of the word that starts with 'c'.</p>

<p>I looked into the selectors (i.e. ~=) but that didn't seem to work.  What is the best way to accomplish a filter matching from the 1st letter in the list?</p>

<p><strong>UPDATE:</strong></p>

<p>All the suggestions are really close, but my example was a little off.  I updated the list above to be more accurate.  In the above list all the solutions below still bring back "peach" if my filter is the letter "c".</p>

<p>Sorry for the mistake.</p>

<p><strong>Update #2</strong></p>

<p>ShankarSangoli solution is on the right path but I'm still having issues for example if I type in the characters 'ce' I'm getting a match on:</p>

<p><strong>Absence</strong> rather than on <strong>certificate</strong></p>

<p>What is the best way to make sure I search on the beginning of the word rather than the entire word?</p>
