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

Question

我正在尝试为用户页面制作过滤器，我将在页面上显示所有用户并提供多个过滤器。 将有一个过滤器 - filter by skilled 并且该字段将是 token 字段。 用户可以插入以逗号分隔的多个技能。 但问题从这里开始—— 我无法匹配该字段，能否请您建议我执行相同操作的脚本。 这是我的页面:

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

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

演示 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编辑

当使用 token 时，该字段在幕后用竖线分隔。然后，您可以通过 token 创建函数添加回调。

演示 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()