如何在两个搜索框中分割/分隔输入文本

时间:2015-10-02 06:09:03

标签: javascript php jquery html search

我有一个两个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;

我的script filter search tr位于第一列Date_Ordered

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

我想在from and to中过滤日期date_ordered并且它有效,但问题是当我在search box (Date From)上输入时,它还会输入并复制我和#39; ve从(Date From)search box (To)输入。

我尝试在每个Id's中添加一些search box,但仍然相同。我也改变了他们的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

1 个答案:

答案 0 :(得分:0)

如果我理解正确,你必须改变这样的形式:

<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/