如何在列表视图中过滤内部子元素＆amp;也可以使用Jquery在移动应用程序中添加按字母顺序滚动条到列表视图的任何简单方法

时间：2018-05-15 06:08:30

标签： javascript jquery html css

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

如果我点击R它会带我到R所有项目的列表但我的问题是如果R的列表太大而我想从R搜索任何特定项目然后如何做到这一点？
另外如何以简单的方式创建按字母顺序排列的滚动条？

这是我的代码：

＆＃13;
＆＃13; 
$.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);
});
＆＃13; 
h1 {
  font-size: 14pt;
  color: #E76C67;
  margin-top: 0%;
}

h2 {
  font-size: 12pt;
  color: #444444;
  margin-top: -3%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您可以从https://jqueryui.com/autocomplete/获得建议。 它使用对象来存储列表信息。

相关问题
最新问题