title: Jquery for intelligent search
body: <p>I created this little example:</p>
  
  <p><a href="http://jsfiddle.net/fDavN/8391/" rel="nofollow noreferrer">http://jsfiddle.net/fDavN/8391/</a></p>
  
  <p>As you can see, I separated the image in four quadrats using the area-tag.</p>
  
  <ol>
  <li>the first quadrat has the data-name: abc</li>
  <li>the second quadrat has the data-name: def</li>
  <li>the third quadrat has the data-name: ghi</li>
  <li>the fourth quadrat has the data-name: jkl</li>
  </ol>
  
  <p>Moreover, there is an input for a search.
  What I want you to ask, if it's possible to type anything in the input and look if the input matches one of the data-name´s.</p>
  
  <p>Scenario:</p>
  
  <p>I type an "a" in the input => Every area with an "a" at the beginning of its data-name should stay as it is, but other area´s should get an opacity of "1". Is this possible using the keyup-event? e.g. :</p>
  
  <pre><code>$(document).ready(function () {
      $("#searchfield").keyup(function() { 
          //and so on..
      }
  }
  </code></pre>
  
  <p>And how to make <code>jquery</code> searching for the <code>html</code>? I know how to do ajax etc.. But make <code>jquery</code> searching in the source code of website?</p>
  
  <p>Greetings</p>