键入 jquery jsp 时过滤列表

Question

我的问题是：

我有一个 jsp、java 和 jquery 中的人员列表，我有 2 个输入姓名和年龄，我想用它们来过滤带有按键事件的列表。

Classes:
Person{ 
 Id id; 
 string age; 
 string others;
 getters and setters
}

Id{
 string name;
 string surname;
 getters and setters
}

我想从 id 中获取 jquery 值：

JAVA:
List<Person> list_of_persons; //It has some persons in it
map.put("list", list_of_persons);

HTML:
<% int i = 0; %>
<input type="text" id="filter_name"/>
<input type="text" id="filter_age"/>
<c:forEach items="${map.list}" var="listPerson" id="list_of_persons">
<% i++; %>
<div class="row reg_<%=i%>">

<div class = "col-md-2">
<input type="text" class="form-control" id="person_name_<%=i%>" 
value="<c:out value="${listPerson.getId().getName()}"/>"/>
</div>
<div class = "col-md-2">
<input type="text" class="form-control" id="person_age_<%=i%>" 
value="<c:out value="${listPerson.getAge()}"/>"/>
</div>
<div class = "col-md-2"><input type="text" class="form-control" 
id="person_others_<%=i%>" 
value="<c:out value="${listPerson.getOthers()}"/>"/>
</div>
</foreach>
</div>

jquery：

namekeyupevent(){
  //want to filter the list with the name on keyup

  //Should i compare input name with each object of the list?
  // if so how can i get the name from the list?
  // Something like this would be ok?

   $('.list_of_persons).each(function(){
     var text = $(this).id.name;
}

agekeyupevent(){
  //want to filter the list with the age on keyup
}

感谢您的帮助。

您好。

Answer 1

您可以为每个输入类型（例如年龄、姓名）添加类，并将每个迭代放在 div 中，以便可以识别每一行。

HTML：

<input type="text" id="filter_name"/>
<input type="text" id="filter_age"/>
<c:forEach items="${map.list}" var="listPerson" id="list_of_persons">
<div class="record">
<input type="text" class="name form-control" id="person.id" value="<c:out 
       value="${listPerson.getId().getName()}"/>">
<input type="text" class="age form-control" id="person.age" value="<c:out 
       value="${listPerson.getAge()}"/>">
<input type="text" class="other form-control" id="person.others" value="<c:out 
       value="${listPerson.getOthers()}"/>">
</div>
</foreach>

jQuery：为过滤器绑定 keyup 事件处理程序并检查年龄或名称是否包含值，然后显示记录accordinlgy

$(function(){
  $('#filter_name').on('keyup', function(){
      var value = $(this).val();
      $('div.record').hide();//hide all record
      $('div.record').filter(function(){
          return $(this).find('name').val().indexOf(value) !=-1;
      }).show();
  });

  $('#filter_age').on('keyup', function(){
      var value = $(this).val();
      $('div.record').hide();//hide all record
      $('div.record').filter(function(){
          return $(this).find('age').val().indexOf(value) !=-1;
      }).show();
  });
});