title: Change an if statement in jQuery
body: <p>jQuery is so hard to understand for me. Everytime I have to use it I end up reading docs for hours to achieve nothing. I'm using this code (live-editing is available).</p>
  
  <p><a href="http://codepen.io/anon/pen/vKFBy" rel="nofollow">http://codepen.io/anon/pen/vKFBy</a></p>
  
  <p>It filters records in real time while tyiping in an input text. The problem is that I don't want its search method. Let me explain.</p>
  
  <pre><code>&lt;ul id="list"&gt;
    &lt;li class="in"&gt;&lt;span&gt;google.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="in"&gt;&lt;span&gt;gmail.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="in"&gt;&lt;span&gt;samsung.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="in"&gt;&lt;span&gt;amazon.de&lt;/span&gt;&lt;/li&gt;
    &lt;li class="in"&gt;&lt;span&gt;apple.de&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When I type "G" or "g" (it's case insensitive) amazon.de and apple.de disappear because they don't contain any "G" meanwhile google.com gmail.com and samsung.com remain visible. This is the problem. I don't want to keep samsun<strong>g</strong>.com just because at some point it has a "g". I want to return only elements where span <strong>begins</strong> with a certain string. In pratical terms this is what I'm trying to reproduce.</p>
  
  <p>I type "G":</p>
  
  <pre><code>&lt;ul id="list"&gt;
    &lt;li class="in"&gt;&lt;span&gt;google.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="in"&gt;&lt;span&gt;gmail.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="hiding out hidden"&gt;&lt;span&gt;samsung.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="hiding out hidden"&gt;&lt;span&gt;amazon.de&lt;/span&gt;&lt;/li&gt;
    &lt;li class="hiding out hidden"&gt;&lt;span&gt;apple.de&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I keep typing "Go":</p>
  
  <pre><code>&lt;ul id="list"&gt;
    &lt;li class="in"&gt;&lt;span&gt;google.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="hiding out hidden"&gt;&lt;span&gt;gmail.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="hiding out hidden"&gt;&lt;span&gt;samsung.com&lt;/span&gt;&lt;/li&gt;
    &lt;li class="hiding out hidden"&gt;&lt;span&gt;amazon.de&lt;/span&gt;&lt;/li&gt;
    &lt;li class="hiding out hidden"&gt;&lt;span&gt;apple.de&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I know the syntax that I should use:</p>
  
  <pre><code>indexOf(searchTerm)
  </code></pre>
  
  <p>Or:</p>
  
  <pre><code>[span^="'+searchTerm+'"]
  </code></pre>
  
  <p>Or:</p>
  
  <pre><code>str.match(/^searchTerm/)
  </code></pre>
  
  <p>But I can't manage to edit the current if statements. Everytime I break the script.</p>