点击弹出窗口中的按钮搜索结果

时间:2015-11-05 06:32:59

标签: javascript php jquery html

我想在点击按钮时显示搜索结果,但是我的代码在没有点击按钮的情况下给我搜索结果。

我认为它给了我查询结果而不是搜索结果。

当我在页面上显示结果时,此代码工作正常,但根据我的要求,我想在弹出窗口中显示搜索结果。

我使用过jquery popup。

<body><form action="#" method="POST"><body><form action="#" method="POST"><div data-role="page">

<div data-role="main" class="ui-content" >

<a href="#a" data-rel="popup" class="ui-btn" onclick="result()" data-transition="slidefade">Smart Search</a>

</div>

 <div data-role="popup" id="a" class="col-sm-6 ui-content">
 <div class="input-group col-sm-8">      
                                  <input type="text" name="query" class="form-control" placeholder="Search Products to Buy..."  "  />

                                                  <span class="input-group-btn">
                                                                            <button name ="search_btn" id ="search class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
                                                  </span>

    </div><div class="input-group col-sm-8 " ><table class="table table-hover">
                   <thead >
                         <tr bgcolor="#1E90FF">
                                <th>Products</th>
                                <th>Details</th>
                                <th>Retailers</th>
                                <th>Price</th>
                                <th>Buy</th>
                       </tr>
                    </thead>
                </div><?php
 error_reporting(0);
 mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
 mysql_select_db("wordpress") or die(mysql_error());
     ?><?php $query = $_POST['query'];  $query = htmlspecialchars($query); 
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
     if(mysql_num_rows($raw_results) > 0)
    {
    while($results = mysql_fetch_array($raw_results))
        { ?><div class="input-group col-sm-8" style="text-align:center;margin-top:10px;"><tbody>

                      <tr>
                         <td><img src = "<?php  echo $results['feed_product_image'];  ?>"  style="object-fit:contain;height:70px;width:100px;" /></td>
                         <td><?php  echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
                         <td><img src = "<?php  echo $results['image'];  ?>"  style="background-size:contain;height:40px;width:120px;"  /></td>
                         <td><?php echo '<i class="fa fa-inr">&nbsp;'.$results['price']. '</i>'.".00" ;   ?></td>
                         <td><a href="<?php  echo $results['deeplink'];  ?>" style="background-color:#ff8c21;" class="btn btn-warning btn-md">Buy now</a></td>
                     </tr>
    </tbody>
        </div>  


           <?php 

      }      
    }
    else
    { // if there is no matching rows do following
        echo "No results";
    }




?>

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

1 个答案:

答案 0 :(得分:0)

这将为您提供模态弹出窗口中的搜索结果。我已经改变了你的代码了一下。如果没有搜索结果,您也可以弹出。

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

</head>
<body>
      <div data-role="page">

<div data-role="main" class="ui-content" >

<a href="#a" data-rel="popup" class="ui-btn" onclick="result()" data-transition="slidefade">Smart Search</a>

</div>

 <div data-role="popup" id="a" class="col-sm-6 ui-content">
 <div class="input-group col-sm-8">   
     <form  method="POST">
        <input type="text" name="query" class="form-control" placeholder="Search Products to Buy..."  "  />

        <span class="input-group-btn">
                                  <button name ="search_btn" id ="search" class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
        </span>
     </form>

    </div>

    <?php
        if(isset($_POST['query']) && $_POST['query']!="" ) {
        error_reporting(0);
        mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
        mysql_select_db("wordpress") or die(mysql_error());
        $query = $_POST['query'];  $query = htmlspecialchars($query); 
        $query = mysql_real_escape_string($query);
        $raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());


        if(mysql_num_rows($raw_results) > 0)
        {
    ?>
    <div class="input-group col-sm-8  modal-box"  id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
      <table class="table table-hover">
         <thead >
               <tr bgcolor="#1E90FF">
                      <th>Products</th>
                      <th>Details</th>
                      <th>Retailers</th>
                      <th>Price</th>
                      <th>Buy</th>
             </tr>
          </thead>
          <tbody>
    <?php 
        while($results = mysql_fetch_array($raw_results))
        { ?>

                      <tr>
                         <td><img src = "<?php  echo $results['feed_product_image'];  ?>"  style="object-fit:contain;height:70px;width:100px;" /></td>
                         <td><?php  echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
                         <td><img src = "<?php  echo $results['image'];  ?>"  style="background-size:contain;height:40px;width:120px;"  /></td>
                         <td><?php echo '<i class="fa fa-inr">&nbsp;'.$results['price']. '</i>'.".00" ;   ?></td>
                         <td><a href="<?php  echo $results['deeplink'];  ?>" style="background-color:#ff8c21;" class="btn btn-warning btn-md">Buy now</a></td>
                     </tr>



           <?php 

      }   
      ?>
                     </tbody>
                </table>

        </div>  

      <?php 
        }
        else
        { // if there is no matching rows do following
            echo "No results";
        }

       }
    ?>

    </div>
    </form>
    </div>
        <script>
          $(function() {
            $( "#popup" ).dialog();
          });
          </script>