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事件处理程序，并检查age或name是否包含值，然后显示记录一致性

$(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();
  });
});

键入jquery jsp时的过滤列表

1 个答案: