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

Question

我的要求是在 phonegap 应用程序中显示联系人列表。由于 Phonegap 应用程序中的 JS 执行速度很慢，是否有任何替代方案可以减少 JS 开销？

Answer 1

Here is a way .我使用它并在 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