个人中心
gpt4 book ai didi

php - 搜索结果将显示在响应式弹出窗口中

转载 作者：行者123 更新时间：2023-11-30 22:31:34 27 4
gpt4 key购买 nike

当我在搜索框中输入任何关键字时，我从 mysql 数据库中获取了记录。到目前为止，一切都正常运行，并且还显示了该特定关键字的结果。我的查询是获取的结果将显示在搜索框下方，而不是我应该在弹出窗口上显示结果并且弹出窗口也应该响应。请建议我，下面是代码

index.php 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="pt" dir="ltr"><head><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>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<!-- JQUERY FROM GOOGLE API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
  $(function() {
    $("#lets_search").bind('submit',function() {
      var value = $('#str').val();
       $.post('db_query.php',{value:value}, function(data){
         $("#search_results").html(data);
       });
       return false;
    });
  });
</script></head>  <body>

<div style="text-align:center;">
  <form id="lets_search" action="" >
    Search:<input type="text" name="str" id="str">
    <input type="submit" value="send" name="send" id="send">
  </form>
  <div id="search_results"></div>
</div></body></html>

db_query.php

<?php $con=mysqli_connect("localhost","root", "","u871197953_shope") or die("Error connecting to database: ".mysql_error()); mysqli_select_db($con,"u871197953_shope") or die(mysql_error()); $query = mysqli_query($con,"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 '%".$_POST['value']."%' LIMIT 20");   if(mysqli_num_rows($query) > 0)
    {
    ?>
    <div class="input-group col-sm-10  modal-box"  id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
          <table class="table table-hover" style="text-align:center;">
            <thead>
                 <tr bgcolor="#1E90FF" >
                          <th>Products</th>
                          <th style="text-align:center;">Details</th>
                          <th>Retailers</th>
                          <th>Price</th>
                          <th>Buy</th>
                 </tr>
            </thead>
            <tbody>
            <?php 
            while($results = mysqli_fetch_array($query))
            { ?>
                  <tr>
                     <td><img src = "<?php  echo $results['feed_product_image'];  ?>"  style="object-fit:contain;height:60px;width:80px;" /></td>
                     <td><?php  echo "<p style='font-size:12px;'>".$results['feed_product_name']. "</p>" ; ?></td>
                     <td><img src = "<?php  echo $results['image'];  ?>"  style="background-size:contain;height:30px;width:100px;"  /></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-sm">Buy now</a></td>
                 </tr>
            <?php 
            }
            ?>
            </tbody>
          </table>
        <?php
    }
    else
    { // if there is no matching rows do following
        echo "No results found...";
    } ?>

最佳答案

默认情况下，引导弹出窗口/模态窗口是响应式的。别担心。

在您的页面中添加模态窗口 html 代码。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

加载结果后将结果添加到模型主体中

$('#myModal .modal-body').html(data);

然后触发模型使用:

$('#myModal').modal(options);

- Use standard bootstrap options in the modal function.

关于php - 搜索结果将显示在响应式弹出窗口中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33772039/

27 4 0
文章推荐： c# - ListBox ItemTemplate 中的 Togglebutton 中的 Textblock 中的文本换行
文章推荐： python - Tensorflow ValueError : All shapes must be fully defined: [TensorShape([Dimension(None), 维度(无)，维度(3)])，TensorShape([])
文章推荐： python - Python如何将特定的字符串提取到多个变量中
文章推荐： 带有动态 SQL 的 MySQL 查询死于错误 "Commands out of sync"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com