javascript - 如何过滤 ListView 中的内部子元素以及使用 Jquery 在移动应用程序中将字母滚动条添加到 ListView 的任何简单方法

Question

我正在使用 jQuery 创建一个移动应用程序，当我点击任何字母表时我有字母滚动条，它会在 ListView 中显示所有元素。

如果我点击 R，它会带我到包含 R 的所有元素的列表，但我的问题是，如果 R 的列表太大，我想从 R 中搜索任何特定元素，那么该怎么做？
还有如何以简单的方式创建字母滚动条？

这是我的代码:

$.mobile.document.on("pagecreate", "#demo-page", function() {
  var head = $(".ui-page-active [data-role='header']");
  $.mobile.document.on("click", "#sorter li", function() {
    var top,
      letter = $(this).text(),
      search = $("[data-filter='true']"),
      divider = $("#sortedList").find("li.ui-li-divider:contains(" + letter + search + ")");
    if (divider.length > 0) {
      top = divider.offset().top;
      $.mobile.silentScroll(top);
    } else {
      return false;
    }
  });
  $("#sorter li").hover(function() {
    $(this).addClass("ui-btn").removeClass("ui-li-static");
  }, function() {
    $(this).removeClass("ui-btn").addClass("ui-li-static");
  });
});

$(function() {
  $.mobile.window.on("scroll", function(e) {
    var headTop = $(window).scrollTop(),
      foot = $(".ui-page-active [data-role='footer']"),
      head = $(".ui-page-active [data-role='header']"),
      headerheight = head.outerHeight();
    if (headTop < headerheight && headTop > 0) {
      $("#sorter").css({
        "top": headerheight + 15 - headTop,
        "height": window.innerHeight - head[0].offsetHeight + window.pageYOffset - 10
      });
      $("#sorter li").height("3.3%");
    } else if (headTop >= headerheight && headTop > 0 && parseInt(headTop +
        $.mobile.window.height()) < parseInt(foot.offset().top)) {
      $("#sorter").css({
        "top": "60px",
        "height": window.innerHeight - 8
      });
      $("#sorter li").height("3.3%");
    } else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top) &&
      parseInt(headTop + window.innerHeight) <= parseInt(foot.offset().top) +
      foot.height()) {
      $("#sorter").css({
        "top": "60px",
        "height": window.innerHeight - (parseInt(headTop + window.innerHeight) -
          parseInt(foot.offset().top) + 8)
      });
    } else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top)) {
      $("#sorter").css({
        "top": "60px"
      });
    } else {
      $("#sorter").css("top", headerheight + 15);
    }
  });
});
$.mobile.window.on("throttledresize", function() {
  $("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
});
$.mobile.document.on("pageshow", "#demo-page", function() {
  var headerheight = $(".ui-page-active [data-role='header'] [data-filter='true']").outerHeight();
  $("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
});

h1 {
  font-size: 14pt;
  color: #E76C67;
  margin-top: 0%;
}

h2 {
  font-size: 12pt;
  color: #444444;
  margin-top: -3%;
}

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="page" id="demo-page" data-url="demo-page">
  <div data-role="header">
    <h1>Gospel Songs </h1>
    <a href="#" id="home" data-icon="home" data-iconpos="notext"> Home</a>
    <a href="#" class="jqm-search-link ui-shadow ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
  </div>
  <div role="main" class="ui-content">
    <div id="sorter">
      <ul data-role="listview">
        <li><span>A</span></li>
        <li><span>B</span></li>
        <li><span>C</span></li>
        <li><span>D</span></li>
        <li><span>E</span></li>
        <li><span>F</span></li>
        <li><span>G</span></li>
        <li><span>H</span></li>
        <li><span>I</span></li>
        <li><span>J</span></li>
        <li><span>K</span></li>
        <li><span>L</span></li>
        <li><span>M</span></li>
        <li><span>N</span></li>
        <li><span>O</span></li>
        <li><span>P</span></li>
        <li><span>Q</span></li>
        <li><span>R</span></li>
        <li><span>S</span></li>
        <li><span>T</span></li>
        <li><span>U</span></li>
        <li><span>V</span></li>
        <li><span>W</span></li>
        <li><span>X</span></li>
        <li><span>Y</span></li>
        <li><span>Z</span></li>
      </ul>
    </div>
    <!-- /sorter -->
    <ul data-role="listview" data-autodividers="true" id="sortedList" data-filter="true">
      <li>
        <a href="#">
          <h1>All The Way My Saviour Leads Me lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Amazing Grace lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>As He Meant It To Be lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>At My Door lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>At Times Like These lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>At The Foot Of The Cross (Ashes To Beauty) </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Bring Back My Best Friend lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Be Still </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Beauty For Ashes</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Before You I Kneel (A Worker's Prayer)</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Cantate Domino lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Christ Is Enough</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Counting On God Lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Cry Of The Broken </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Create in me a clean hear </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Days Of Elijah</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Deep In Love With You Lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Depth of Mercy </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Everlasting Love </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Fix it jesus</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>God Blesses Me Everyday Lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> God Was Walking With Me lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> God Will Smile Up Above lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Have Some Mercy On Me lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> He Made Me Whole lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> He Will Hear Your Cry lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> He's Changed My Outlook lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Heaven Will Be Our Reward lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Here I Am To Worship lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Hey yo 123 lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> I know who I am lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>I lift my hands to you lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>I Say Praise To The Lord lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>I Still Pray My Soul Will Be Saved lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>I Want Two Wings To Veil My Face lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> I Will Overcome lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Jesus, All For Jesus lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Let It Rise lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Love Lives On lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Matthew Twenty-four (Is Knocking At The Door) lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Our Bridges Are Burned lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Our Faith lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Praise lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Praise on the inside lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Reach Out To The Lord lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Sending Up My Timber lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Servent;s heart lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Sharin' Love (Never Hurt No One) lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Should We Give Less Than God lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Since God Made Men lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>So Much To Thank Him For lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Thank God For Memories lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Thankful And Glad lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>The Dream lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>The Good Book lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> The Hypocrite lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> The Lord Sent Me His Love lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>The Rivers Edge lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>The Savior Of All Men lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Their Gift Came From Him lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Until The Day I Found Him lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Unending Love lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Unto The One </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Victory In Jesus Lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Voice of Truth</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> Victorious God </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>We Bring The Sacrifice Of Praise lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> We Should Feel Blessed lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> What A Cross He Had To Bear lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> When God Speaks To Us lyrics</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Whenever I Fall lyrics </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Yahweh </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Yes and Amen </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> You Alone</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1> You Amaze Us</h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>You are holy </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1>Your Great Name </h1>
        </a>
      </li>
      <li>
        <a href="#">
          <h1><span id='display_song_name'></span> </h1>
        </a>
      </li>
    </ul>
  </div>

  <footer data-role="footer" data-position="fixed">
    <nav data-role="navbar">
      <ul>
        <li><a href="index.html" data-icon="home"> Home </a></li>
        <li><a href="index.html" data-icon="grid">Photos</a></li>
        <li><a href="#add_song" data-icon="plus" data-transition="flip" id="#add_song"> Add Song </a> </li>
      </ul>
    </nav>
  </footer>
</div>

Answer 1

您可能会从 https://jqueryui.com/autocomplete/ 得到灵感. 它使用对象来存储列表信息。