我正在使用jQuery创建一个移动应用程序，单击任何字母表时，我都有字母滚动条，它会在列表视图中显示所有元素。
如果我单击 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>你可能会从 https://jqueryui.com/autocomplete/那里得到想法。 它使用 Object 来存储列表信息。