Javascript JQuery中的活动搜索栏
我正在尝试为项目列表创建搜索选项。这样,用户可以在列表中搜索特定项目。然而,我有几个问题。我的列表同时使用span和图像。我创建的用于排序的jquery按跨距对列表进行排序,但是,当我尝试使用活动搜索时,它没有做任何事情。以下是我的示例代码:Javascript JQuery中的活动搜索栏,javascript,jquery,html,list,search,Javascript,Jquery,Html,List,Search,我正在尝试为项目列表创建搜索选项。这样,用户可以在列表中搜索特定项目。然而,我有几个问题。我的列表同时使用span和图像。我创建的用于排序的jquery按跨距对列表进行排序,但是,当我尝试使用活动搜索时,它没有做任何事情。以下是我的示例代码: <input type="text" name="searchList" id="searchInput" placeholder="Type Here To Search" /> <ul id="lessonList" class="l
<input type="text" name="searchList" id="searchInput" placeholder="Type Here To Search" />
<ul id="lessonList" class="lessonlist">
<li><span class="name">Lesson 1</span>
<img src="images/lessonFiller1.png" width="45%" height="45%"/>
</li>
<li><span class="name">Lesson 2</span>
<img src="images/lessonFiller2.png" width="45%" height="45%"/></li>
<li><span class="name">Lesson3</span>
<img src="images/lessonFiller3.png" width="45%" height="45%" /></li>
<li><span class="name">Lesson 4</span>
<img src="images/lessonFiller4.png" width="45%" height="45%"/></li>
<li><span class="name">Lesson 5</span>
<img src="images/lessonFiller5.png" width="45%" height="45%"/></li>
</ul>
我做错了什么?这是我能做的吗?提前感谢。有多个问题
$(文档).ready(函数(e){
var desc=$(this).hasClass(“asc”),
列表=$(“#lessonList”);
list.append(list.children().get().sort)(函数(a,b){
var aProp=$(a).find(“span.name”).text(),
bProp=$(b).find(“span.name”).text();
返回(aProp>bProp-1:aPropli');
var valThis=$(this.val();
console.log(valThis);
变量列表=$('ul li span');
列表。每个(函数(){
var text=$(this.text().toLowerCase();
(text.indexOf(valThis)==0)?$(this.parent().show():$(this.parent().hide();});
});
});
我已经评论了preventDefault()。效果很好,谢谢!不过我还有一个问题。我怎样才能使它搜索跨度的主体?例如,如果我键入“1”,则只能以其他方式键入“lesson”,整个列表将消失。更不用说我能够找到解决方案。我所要做的就是把==0改成>=0,这就成功了。我想更好的方法是>-1。这应该更快。
$(document).ready(function(e) {
var desc = $(this).hasClass("asc"),
list = $("#lessonList");
list.append(list.children().get().sort(function(a, b) {
var aProp = $(a).find("span.name").text(),
bProp = $(b).find("span.name").text();
return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1);
}));
$(this).toggleClass("desc", desc)
.toggleClass("asc", !desc)
.siblings().removeClass("asc desc");
e.preventDefault();});
$('#searchInput').keyup(function(){
//var that = this, $allListElements = $('ul > li');
var valThis = $(this).val();
var list = $('ul li span');
list.each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();});});
$(document).ready(function(e) {
var desc = $(this).hasClass("asc"),
list = $("#lessonList");
list.append(list.children().get().sort(function(a, b) {
var aProp = $(a).find("span.name").text(),
bProp = $(b).find("span.name").text();
return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1);
}));
$(this).toggleClass("desc", desc)
.toggleClass("asc", !desc)
.siblings().removeClass("asc desc");
//e.preventDefault();
//Move the search input inside ready
$('#searchInput').keyup(function(){
//var that = this, $allListElements = $('ul > li');
var valThis = $(this).val();
console.log(valThis);
var list = $('ul li span');
list.each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) == 0) ? $(this).parent().show() : $(this).parent().hide();});
});
});