title: How can i convert attribute data to lower case using JavaScript only?
body: <p>I'm trying to make auto suggest search. Its working fine only thing i want to improve is that upper and lower case values. I have below <code>li</code> list</p>
  
  <pre><code>&lt;input type="text" id="filter-search" /&gt;
  
  &lt;ul&gt;
      &lt;li filter-value="One Is"&gt;One Is (Uppercase)&lt;/li&gt;
    &lt;li filter-value="one is"&gt;one is (Lowercase)&lt;/li&gt;
      &lt;li filter-value="two"&gt;Two&lt;/li&gt;
      &lt;li filter-value="three"&gt;Three&lt;/li&gt;
      &lt;li filter-value="four"&gt;Four&lt;/li&gt;
      &lt;li filter-value="five" &gt;Five&lt;/li&gt;
      &lt;li filter-value="six"&gt;Six&lt;/li&gt;
      &lt;li filter-value="seven"&gt;Seven&lt;/li&gt;
      &lt;li filter-value="eight"&gt;Eight&lt;/li&gt;
      &lt;li filter-value="nine"&gt;Nine&lt;/li&gt;
      &lt;li filter-value="ten" &gt;Ten&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>var inputId     = 'filter-search';
  var itemsData   = 'filter-value';
  var displaySet = false;
  var displayArr = [];
  
  function getDisplayType(element) {
      var elementStyle = element.currentStyle || window.getComputedStyle(element, "");
      return elementStyle.display;
  }
  
  document.getElementById(inputId).onkeyup = function() {
      var searchVal = this.value.toLowerCase();
      var filterItems = document.querySelectorAll('[' + itemsData + ']');
      for(var i = 0; i &lt; filterItems.length; i++) {
          if (!displaySet) {
              displayArr.push(getDisplayType(filterItems[i]));
          }
          filterItems[i].style.display = 'none';
          if(filterItems[i].getAttribute('filter-value').toLowerCase().indexOf(searchVal.toLowerCase()) &gt;= 0) {
              filterItems[i].style.display = displayArr[i];       
          }
      }
      displaySet = true;
  }
  </code></pre>
  
  <p>The first <code>li</code> is not searchable, because it has upper case value, here is <a href="https://jsfiddle.net/jf5zkuh4/3/" rel="nofollow"><strong>code</strong></a> (its few line) Can anyone kindly guide me that how can i fix the issue. I would like to appreciate. </p>