Question

我正在尝试为用户页面制作过滤器，我将在页面上显示所有用户，并将提供多个过滤器。熟练的将有一个过滤器 - 过滤器，该字段将是令牌字段。用户可以插入由逗号分隔的多个技能。但问题从这里开始 - 我无法匹配该领域，你能不能建议我做同样的脚本。这是我的页面：

http://sigrideducation.com/gurgon/rem.html （研究技能领域）

我这样做的公司的例子

$(".nameCompany").keyup(function () {
  jQuery.expr[':'].contains = function (a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase().trim()) >= 0;
  };

  var userString = $('.nameCompany').val();
  $('.company1:not(:contains(' + userString + '))').parents().closest('.galcolumn').css('display', 'none');
  $('.company1:contains(' + userString + ')').parents().closest('.galcolumn').css('display', 'block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline-block">
  <div class="panel panel-default user-box">
    <div class="panel-body">
      <div class="media">
        <img src="images/people/50/guy-4.jpg" alt="people" class="media-object img-circle pull-left" />
        <div class="media-body">
          <a href="#" class="username name1 All">Anurag</a>
            <div class="profile-icons">
              <span><i class="fa fa-users"></i> 372</span> <span><i class="fa fa-photo"></i> 43</span> <span><i class="fa fa-video-camera"></i> 3 </span>
            </div>
          </div>
        </div>
      </div>
      <div class="panel-body bordered">
        <p class="common-friends">Details</p>
        <div class="user-friend-list">
          <table class="UTb">
            <!--<tr>
               <td>Name</td><td class="name1 All">ashwani</td>
            </tr>-->
            <tr>
              <td>Company</td><td class="company1 All">HDFC</td>
            </tr>
            <tr>
              <td>Skills</td><td class="skills1 All">Dealing</td>
            </tr>
            <tr>
              <td>Location</td><td class="location1 All">Gurgaon</td>
            </tr>
            <tr>
              <td>Industry</td><td class="industry1 All">Agriculture</td>
            </tr>
            <tr>
              <td>College</td><td class="college1 All">IIM</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="panel-footer">
        <a href="profile.html" target="_blank" class="btn  btn-sm">View Profile <i class="fa fa-share"></i></a>
      </div>
    </div>
</div>

Answer 1

你非常接近。您需要从字符串创建一个数组，然后循环它。

DEMO http://jsfiddle.net/oeq2dm5u/1/

$(".skills-input").keyup(function () {

        jQuery.expr[':'].contains = function (a, i, m) {
            return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase().trim()) >= 0;
        };

        var skillsArray = $('.skills-input').val().split(",");

        $.each(skillsArray, function( index, value ) {
            $('.skills1:not(:contains(' + value + '))').parents().closest('.galcolumn').css('display', 'none');
            $('.skills1:contains(' + value + ')').parents().closest('.galcolumn').css('display', 'block');
        });      
    });

根据提供的jsfiddle编辑

使用令牌时，该字段在幕后管道分隔。然后，您可以通过令牌创建功能添加回叫。

DEMO http://jsfiddle.net/sv3gxLvk/1/

$('#tokenfield')
  .on('tokenfield:createtoken', function (e) {
    var skillsArray = e.attrs.value.split('|');
    $.each(skillsArray, function (index, value) {
        $('.skills:not(:contains(' + value + '))').parents().closest('table').css('display', 'none');
        $('.skills:contains(' + value + ')').parents().closest('table').css('display', 'block');
    });
  })
.tokenfield()

使用jQuery将div的文本与html中的任何输入文本框进行匹配

1 个答案: