在表单中使用的自动完成文本框

时间:2018-10-08 19:54:55

标签: php mysql ajax

我正在尝试为表单创建自动填充框。 基本上,我想要实现的是textarea字段,该字段使我可以在数据库中搜索属于表的名称,然后通过表单将其添加到表中。 我设法创建了这个名称,但它一次只能搜索一个名称,而我需要查找更多名称以添加到同一文本区域。

基本上我有一个文本区域,这必须使我可以插入更多名称: 名称1 名称2 ... 从创建的下拉菜单中选择每个名称的位置。这样,我可以在数据库中插入更多“名称”。

auto_complete.php

<!DOCTYPE html>  
 <html>  
      <head>  
           <title>Autocomplete TextBox</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <style>  
           ul{  
                background-color:#eee;  
                cursor:pointer;  
           }  
           li{  
                padding:12px;  
           }  
           </style>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:500px;">  
                <form method="post" action="insert_db.php">
                <h3 align="center">Box Text</h3><br />  
                <label>Enter  Name</label>  
                <br>&ensp;<textarea name="nominativo" rows="5" cols="30" placeholder="Name Surname" id="nominativo" class="form-control""  ></textarea><br>
                <input type="submit" value="Invia">
                <div id="nominativoList"></div>  
                </form>
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#nominativo').keyup(function(){  
           var query = $(this).val();  
           if(query != '')  
           {  
                $.ajax({  
                     url:"search.php",  
                     method:"POST",  
                     data:{query:query},  
                     success:function(data)  
                     {  
                          $('#nominativoList').fadeIn();  
                          $('#nominativoList').html(data);  
                     }  
                });  
           }  
      });  
      $(document).on('click', 'li', function(){  
           $('#nominativo').val($(this).text());  
           $('#nominativoList').fadeOut();  
      });  
 });  
 </script>

search.php

<?php  
$conn = mysqli_connect("localhost", "root", "123456789", "Personale");  


 if(isset($_POST["query"]))  
 {  
      $output = '';  
      $query = "SELECT * FROM Squadra WHERE Nominativo LIKE '%".$_POST["query"]."%'";  
      $result = mysqli_query($conn, $query);  
      $output = '<ul class="list-unstyled">';  
      if(mysqli_num_rows($result) > 0)  
      {  
           while($row = mysqli_fetch_array($result))  
           {  
                $output .= '<li>'.$row["Nominativo"].'</li>';  
           }  
      }  
      else  
      {  
           $output .= '<li>Country Not Found</li>';  
      }  
      $output .= '</ul>';  
      echo $output;  
 }  

 ?>  

insert_db.php

<?php
$conn = mysqli_connect("localhost", "root", "123456789", "Personale");  
$nominativo = $_POST['nominativo'];

$sql = "INSERT INTO Prenotazione (Nominativo) VALUES ('$nominativo')";
$result = mysqli_query($conn,$sql);


?>

您认为我该怎么办? 谢谢您的关注和宝贵的时间。

0 个答案:

没有答案