如何为搜索框（ajax）创建脚本，但我已经有一个用于模式ajax的脚本[关闭]

Question

关闭。这个问题需要details or clarity。它当前不接受答案。

---

是否要改善此问题？通过editing this post添加详细信息并澄清问题。

[<3小时前关闭。

已经有模态ajax时如何使用ajax创建搜索框？here is my layout我不知道如何结合脚本为模式ajax和搜索ajax任何帮助将非常感激。谢谢你

对不起，英语不好。

此文本将填写此帖子的要求“看起来您的帖子主要是代码；请添加更多详细信息。”

这是我的代码

<script>  
 $(document).ready(function(){
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},  
                success:function(data){  
                     $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");
               
                }  
           });  
      });  
 });  
 </script>

这是用于布局的
 
<?php  
 if(isset($_POST["employee_id"]))  
 {  
      $connect = mysqli_connect("localhost", "root", "", "db_hkrenewal");  
      $query = "SELECT * FROM tbl_form WHERE student_number = '".$_POST["employee_id"]."'";  
      $result = mysqli_query($connect, $query);
      $search = mysqli_real_escape_string($connect, $_POST["query"]);
    
    }   
      
      
      while($row = mysqli_fetch_array($result))  
      {  
          ?>  <div class="table-responsive">  
                  <table class="table table-bordered">
                <tr>  
                     <td width="30%"><label>Student Number</label></td>  
                     <td width="70%"><?php echo $row['student_number'];?></td> 
                </tr>  
               <tr>  
                     <td width="30%"><label>Assigned Department</label></td>  
                     <td width="70%"><?php echo $row['assigned_dept'];?></td> 
                <tr>  
                     <td width="30%"><label>Student Name</label></td>  
                     <td width="70%"><?php echo $row['student_name'];?></td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Course</label></td>  
                     <td width="70%"><?php echo $row['course'];?></td> 
                </tr>  
                <tr>  
                     <td width="30%"><label>Year Level</label></td>  
                     <td width="70%"><?php echo $row['year_level'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>Contact Number</label></td>  
                     <td width="70%"><?php echo $row['contact_no'];?></td>  
                </tr>
                 <tr>  
                     <td width="30%"><label>Email Address</label></td>  
                     <td width="70%"><?php echo $row['email_add'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>Vacant Time</label></td>  
                     <td width="70%"><?php echo $row['vacant_time'];?></td> 
                 <tr>  
                     <td width="30%"><label>HK Special</label></td>  
                     <td width="70%"><?php echo $row['hk_special'];?></td>  
                </tr>
                 <tr>  
                     <td width="30%"><label>Remarks</label></td>  
                     <td width="70%"><?php echo $row['Remarks'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>HK Facilitator</label></td>  
                     <td width="70%"><?php echo $row['hk_faci'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>Department Office</label></td>  
                     <td width="70%"><?php echo $row['dept_office'];?></td> 
                </tr>
                 <tr>  
                     <td width="30%"><label>Registration</label></td>  
                     <td width="70%"><img src ="<?php echo "storephotohere/". $row['registration'];?>" height="50%" width="100%">
                </tr>
                 <tr>  
                     <td width="30%"><label>Endorsement</label></td>  
                     <td width="70%"><img src ="<?php echo "storephotohere/". $row['endorse'];?>" height="50%" width="100%">
                </tr>
                 <tr>  
                     <td width="30%"><label>COM</label></td>  
                     <td width="70%"><img src ="<?php echo "storephotohere/". $row['com'];?>" height="50%" width="100%">
                </tr>
                 <tr>  
                     <td width="30%"><label>DTR</label></td>  
                     <td width="70%"><img src ="<?php echo "storephotohere/". $row['dtr'];?>" height="50%" width="100%">
                </tr>
                </table></div>
                 <?php }?>
 

Answer 1

据我所知，我会在这里回答问题。我认为以下几点

名为字段名称和字段名称为table_name的简单DB（example_db）表>
1. index.html文件，其中有一个div显示结果，一个输入字段供用户输入
2. 带有jquery的ajax的Javascript文件作为custom.js的文件
3. 控制器文件名作为SearchController
4. 这是数据库表table_names结构

table_names

id | name

这是index.html文件

//for user input
<input type="text" id="input_name">

//For search result

<div id="result"></div>

custom.js

    //for each key up
    $('body').on('keyup','#input_name', function(){
    //get user input val
    var val = $('#input_name').val();
    //ajax call
    $.ajax({

    url: '/SearchController.php' // In here I just call for the controller . But you should 
                                 //insert relevant url here
         method:'post',

         //Passing user input val extracted as data
         data:{ 'user_input' :val }

         success:function(data){
         $('#result').html(data);  
         },
         error:function(errors){
         console.log (errors);
        }
    });
 });

SearchController.php

     if(isset($_POST["user_input"]))   {

     //defining empty string to store values 
     $result = '';

     $search_ name = $_POST['user_input'];

     $connect = mysqli_connect("localhost", "root", "", "example_db");  
          //Query -  **% sign at the end is must**

          $query = "SELECT * FROM table_name WHERE name LIKE '$search_name%'"; 

          $result = mysqli_query($connect, $query);

          $search = mysqli_real_escape_string($connect, $search_ name );

  while($row = mysqli_fetch_array($result))  
      {  
        //in here I'm looping a simple html label with fetched data from db and 
        // concatenating that data with the $result string

        $result .= '<label> '.$row['name'].' <label>';
       }
      //Returning result this will be displayed in front-end
      return $result;
     }

用于测试

始终使用

控制台
1. 网络
2. 在您的网络浏览器开发人员工具中，检查出什么问题了。请注意，我尚未测试此代码。但这是我通常所做的。

更多信息资源

[[使用jQuery的Ajax表单提交示例
1. PHP MySQL Ajax Live Search
2. PHP Example - AJAX Live Search