我对 JQuery 不是很好,但这次我已经走得很远了..
我试图让下面的内容在输入时显示搜索结果,如果您输入“rob”并单击“B”,它就会这样做。字母选择器工作正常:
http://tm.eth3r.co.uk/test3.html
我在这里弹出了所有代码,这可能更容易查看:http: //jsfiddle.net/ro6er/gQ6Nc/ (忽略所有css,直接来自wordpress)
这是jQuery:
$(function() {
//a-z switcher
$(document).ready(function() {
$('.navigation-tabs a').click(function(){
switch_tabs($(this));
return false;
});
switch_tabs($('.default-tab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.navigation-tabs a').removeClass("selected");
var id = obj.attr("data-custom-attr");
$('#'+id).show();
obj.addClass("selected");
}
//a-z switcher
if ($("#searchInput").keyup)
{
//Declare the custom selector 'containsIgnoreCase'.
$.expr[':'].containsIgnoreCase = function(n,i,m){
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#searchInput").keyup(function(){
//hide all the rows
$(".tab-content").find("table").hide();
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $(".tab-content").find("table");
//Recursively filter the jquery object to get results.
$.each(data, function(i, v){
jo = jo.filter("*:containsIgnoreCase('"+v+"')");
});
//show the rows that match.
jo.show();
//Removes the placeholder text
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
}
});