我是jquery的新手。我想要创建的是一个JqueryFilter的Unordered列表,上面有链接和输入字段。当我在输入字段中键入字母时,我希望li项目中链接的字母改变颜色。没有链接,它是可以实现的,但我需要它的链接(a href)。例如:如果我输入孟买的"妈妈",那么列表中有妈妈的字母应该变成红色。看看Jsfidle
HTML
<div id="location-search">
<p id="header">Select Your Prefered Location</p>
<ul id="list">
<li><a href="#">Mumbai</a></li>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Goa</a></li>
<li><a href="#">Navi Mumbai</a></li>
<li><a href="#">Pune</a></li>
<li><a href="#">Thane</a></li>
</ul>
</div>
CSS
body {background:#f3f3f3;}
#location-search {float:left; display:inline; width:280px; background:#fff; padding:20px;}
p#header {font:bold 15px Arial;}
input {
border:1px solid #ccc;
font-size:1em;
height:2.10em;
*height:1.0em;
line-height:1.0em;
padding:0.10em 0;
width:100%;
}
.filterform {
width:220px;
font-size:12px;
display:block;
}
ul#list {float:left; display:inline; width:224px; padding:10px 0;}
ul#list li {font:bold 13px Arial; padding:5px 0 5px 10px;}
ul#list li a {color:#646464;}
Javascript
(function ($) {
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function listFilter(header, list) {
var form = $("<form>").attr({"class":"filterform","action":"#"}),
input = $("<input>").attr({"class":"filterinput","type":"text"});
$(form).append(input).appendTo(header);
$(input)
.change( function () {
var filter = $(this).val();
if(filter) {
$(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
$(list).find("a:Contains(" + filter + ")").parent().slideDown();
} else {
$(list).find("li").slideDown();
}
return false;
})
.keyup( function () {
$(this).change();
});
}
$(function () {
listFilter($("#header"), $("#list"));
});
}(jQuery));
以下是我想要实现的目标:屏幕截图
如果有任何帮助,我将不胜感激。我只是被困在这一步。N我做过的所有其他事情。
这里是另一个解决方案Demohttp://jsfiddle.net/MF4Tn/28/
我使用substring
进行了一些在线更改,然后添加span
来更改的颜色
这是正在运行的Demohttp://jsfiddle.net/MF4Tn/12/
我添加了两个javascript函数:jQuery.fn.removeHighlight
和jQuery.fn.highlight
以及小css代码。javascript是我从下面发布的链接中获取的。
下面是编写有用的代码示例感谢@dzordz
我创建了一个小提琴,可以满足您的需求:http://jsfiddle.net/MF4Tn/29/
基本上是这样的:
$(list).find("li>a").each(function(id,el){
var a=$(el);
if(a.text().toLowerCase().indexOf(filter.toLowerCase()) >= 0){
a.html(a.text().split(filter).join("<span style='color:red;'>"+filter+"</span>" ));
}else{
a.html(a.text());
}
});
这是如何做到的:
- 我迭代所有的achor,然后检查内容是否与过滤器一致
- 如果是,我插入一个使此文本变为红色的跨度
我删除了所有的slideDown
和slideUp
内容,以便清理这个示例。
人们甚至可以把.split()
和.join()
的东西变成某种字符串替换放克音。