如何在两个搜索框中拆分/分离输入文本


How to split/separate input text in two search boxes

我有两个input search boxes的形式,当我在第一个search box中键入文本时,它还会将我从第一个search box键入的文本复制到第二个。

这是我的search boxes 表格

<form style="margin-bottom: 0px;">
    <label>Date From :</label>
    <input class="search" type="search" data-column="0">
    &nbsp;
    <label>To :</label>
    <input class="search" type="search" data-column="0">
</form>

这是我的table

<table class="tablesorter table table-bordered table-condensed" id="cLoanOut" style="table-layout: fixed;">
    <colgroup>
        <col width="110">
        <col width="130">
        <col width="50">
        <col width="60">
        <col width="90">
    </colgroup>
    <thead>
        <tr>
            <th>Date Ordered</th>
            <th>Order No.</th>
            <th>Total Item(s)</th>
            <th>Total Amount</th>
            <th>Order Status</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我的PHP显示行

case "display":
    $sql = "SELECT * from tb_empgroc_master";
//            $myData = mysql_query($sql,$con);
    $result = $atecCoop->query($sql);
//            mysql_close($con);
    $html = ''; $ctr = 0;
    if ($result->num_rows){
        while ($row = $result->fetch_object()){
        $id = $row->empgrocmstID;
        $date_ordered = date("m-d-Y");
        $order_no = date($row->order_no);
        $total_items = number_format($row->total_items);
        $total_amount = number_format($row->total_amount,2);
        $order_status = wordwrap($row->order_status);
        $Order = $row->empgrocmstID;
        $html .= "<tr id='$id'>";
        $html .= "<td class='date_ordered' style='text-align:center'>$date_ordered</td>";
        $html .= "<td class='order_no' style='text-align:center'>$order_no</td>";
        $html .= "<td class='total_items' style='text-align:right'>$total_items</td>";
        $html .= "<td class='total_amount' style='text-align:right'>$total_amount</td>";
        $html .= "<td id='$Order' class='order_status' style='text-align:center'>$order_status</td>";
        $html .= "</tr>";
        }
    }
    echo $html;
break;

这是我的scriptfilter search,第一列的tr,就是Date_Ordered

$.tablesorter.filter.bindSearch( $('#cLoanOut'), $('.search') );

我想在date_ordered中过滤日期from and to,它可以工作,但问题是当我在search box (Date From)上键入时,它也会输入并复制我从(Date From)键入的文本到search box (To)

我试着在每个search box中放一些Id's,但仍然是一样的。我还更改了他们的class。但还是一样。就像这样。

<form style="margin-bottom: 0px;">
    <label>Date From :</label>
    <input id="From" class="search" type="search" data-column="0">
    &nbsp;
    <label>To :</label>
    <input id="To" class="Searches" type="search" data-column="0">
</form>
$.tablesorter.filter.bindSearch( $('#cLoanOut'), $('.search') ); // or $('#From')
$.tablesorter.filter.bindSearch( $('#cLoanOut'), $('.Search') ); // or $('#To')

还是一样。。但当我改变search box (To)的数据列时,它们的文本输入完全分离。但我希望这两个在第一列Date Ordered上过滤,这就是为什么它们是data-column="0"

谢谢你的帮助。

这是我的问题

Date from: asdasdasd To: asdasdasd

如果我理解正确,你必须更改如下形式:

<form style="margin-bottom: 0px;">
   <label>Date From :</label>
   <input id="from" class="search" type="search">
   &nbsp;
   <label>To :</label>
   <input id="to" class="search" type="search">
   <input class="realSearch" type="hidden" data-column="0"/>
</form>

并应用一些javascript,请参阅http://jsfiddle.net/p9pkv7yu/1/