Javascript 如何使用CSS属性选择器实现小文本列表搜索功能

我的要求是显示联系人列表和phonegap应用程序。由于Phonegap应用程序中的JS执行速度很慢，有没有JS开销更少的替代方案？

。我使用了这个，并在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>

  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'));