title: Having an issue in building an autocomplete function using jquery
body: <p>I'm trying to create my own autocomplete functionality from scratch. The code below checks for the result within the <code>result</code> class. Then the value within the <code>result</code> class loops through the <code>name</code> classes. If a particular string matches then adds a class called <code>display</code></p>
  
  <p>The problem I'm having right now is that the class <code>display</code> will only be added once it has an exact match and not a partial match (meaning I have to complete the whole string). If I tried removing or erasing the value inside the <code>input textfield</code>, it does not seem to remove the classes that is currently added</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.name-box').on("input", function() {
    let value = $(this).val();
    let result = $(this).text(value);
    $('.result').text(value);
  
    // $(this).find('.name-' + val).addClass('display');
    $('.name-list .name').each(function() {
      if ($('.result').text() == $(this).text()) {
        $(this).addClass('display');
      } else if ($('.result').val() != $(this).val()) {
        $(this).removeClass('display');
      }
    })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
   display: block;
  }
  body {
   line-height: 1;
  }
  ol, ul {
   list-style: none;
  }
  blockquote, q {
   quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
   content: '';
   content: none;
  }
  table {
   border-collapse: collapse;
   border-spacing: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form&gt;
    &lt;input class="name-box" type="text" /&gt;
  &lt;/form&gt;
  
  &lt;ul class="name-list"&gt;
    &lt;li class="name name-noeldelacruz" data-bindhandle="@noeldelacruz"&gt;@noeldelacruz&lt;/li&gt;
    &lt;li class="name name-john" data-bindhandle="@john"&gt;@john&lt;/li&gt;
    &lt;li class="name name-joe" data-bindhandle="@joe"&gt;@joe&lt;/li&gt;
    &lt;li class="name name-james" data-bindhandle="@james"&gt;@james&lt;/li&gt;
    &lt;li class="name name-jake" data-bindhandle="@jake"&gt;@jake&lt;/li&gt;
    &lt;li class="name name-jade" data-bindhandle="@jade"&gt;@jade&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="result"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>