How to implement small text list search functionality using CSS attribute selectors

Question

My requirement was to display contact list and in phonegap application. As JS execution is slow in Phonegap application is there any alternative with less JS overhead?

Answer 1

Here is a way . I used this and got working with good performance on Android.

<div id="container">
   <style class="search-style" type="text/css"></style>
   <input type="text" class="search" />
   <div class="content" data="archana">Archana</div>
   <div class="content" data="prathap">Prathap</div>
   <div class="content" data="pramod">Pramod</div>
   <div class="content" data="pradeep">Pradeep</div>
   <div class="content" data="prakash">Prakash</div>
   <div class="content" data="prasad">Prasad</div>
   <div class="content" data="stefan">Stefan</div>
   <div class="content" data="stefan">Dmytro</div>
</div>

JS:

  var List = (function (w, d) {
        function List(className, target) {
            function byQ(i) {
                return d.querySelector(i);
            }
            var input = byQ('.search'),
                style = byQ('.search-style');
            this.target = target;
            this.className = className;
            input.addEventListener('keyup', function () {
                var val = this.value.replace(/\s+/g, '');
                if (val.length > 0) {
                    html = "." + className + ":not([data^=" + val.toLowerCase() + "]) { display:none; }";
                } else {
                    html = "." + className + "[data]{display:block}";
                }
                style.innerHTML = html;
            }, false);
        }
        return List;
  })(window, document);


  new List('content', document.getElementById('container'));

Demo