Пользовательский ввод для фильтрации строк таблицы

Question

Пользовательский ввод для фильтрации строк таблицы

0

Что мне нужно сделать, когда я начну печатать в файле, и строки будут правильно фильтроваться? В базе данных есть "europe" и "Европа", если я напечатаю "он", показывающий только "европе", но я хочу отображать обе данные, как это сделать...

Код фильтра

$(document).ready(function() {

      $("#content").keyup(function(){
    //hide all the rows
          $("#fbody").find("tr").hide();

    //split the current value of searchInput
          var data = this.value.split(" ");
    //create a jquery object of the rows
          var jo = $("#fbody").find("tr");

    //Recusively filter the jquery object to get results.
          $.each(data, function(i, v){
              jo = jo.filter("*:contains('"+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"});

  });

HTML

<html>
<body>

<div>

<form name="welcomeDiv1" id="welcomeDiv1">
<tr>

      <td>
<input type="text" class="textbox_supplier"  name="content" id="content" >
</td>
      <td>
<input type="text" class="textbox_supplier2"  name="content2" id="content2"  ></td>
<td> <input type="submit" class="textbox_supplier7"   value="+"  name="submit" class="comment_button"/></td>

   </tr>
</form>
</div>

<table id="anyid" class="sortable" > 
<thead>
<tr>
  <th data-sort="int" style="width:163px" >Supplier ID </th> 
  <th style="width:327px" >supplier Name </th>
</tr>
</thead>


<tbody id="fbody">
  <tr>
<td width="144px" class="edit_td">
   <input type="text" style="width:127px;margin:1px 0 0" class="editbox" id="supplierid_input" />
</td>
<td width="310px" class="edit_td">
  <input type="text" style="width:172px;margin:1px 0 0" class="editbox" id="suppliername_input"/>
</td>

<td  width="52px"><div class="delete" id="id">x</div></td>

</tbody>

</table>

</body>
</html>

arokia 22 сен. 2013, в 09:23

Источник

Теги:

jquery

filter

1 ответ

Ещё вопросы

Ireally Rock · Answer 1 · 2013-11-13T11-52-00.000Z

Я предполагаю, что вы хотите, чтобы он показывался в верхнем или нижнем регистре

$("#content").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
    jo.show();
    return;
}
//hide all the rows
jo.hide();

//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
    var $t = $(this);
    var matched = true;
    for (var d = 0; d < data.length; ++d) {
        if (data[d].match(/^\s*$/)) {
            continue;
        }

        var regex = new RegExp(data[d].toLowerCase());
        if ($t.text().toLowerCase().replace(/(manual|auto)/g,"").match(regex) === null) {
            matched = false;
        }
    }
    return matched;
})

//show the rows that match.
.show();
})

.focus(function () {
this.value = "";
$(this).css({
    "color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});