Question

我对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"});
        }

});

Answer 1

我想通了，我需要针对不同的div。我已经更新了我的jsfiddle：http://jsfiddle.net/ro6er/gQ6Nc/

用户测试并传入搜索框或A和B以查看结果。

 $(document).ready(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
          $("#searchblock").find(".tab-content").hide();

 //split the current value of searchInput
          var data = this.value.split(" ");
 //create a jquery object of the rows
          var jo = $("#searchblock").find(".tab-content");
 //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"});
    }
  });

我是王牌。

罗杰

jquery使用tab-switch递归过滤

1 个答案: