ajax把自動完成的結果放到HTML表中

我想實現ajax自動完成功能到我的HTML代碼，我想把自動完成功能的結果放到我的html頁面上的表中，自動完成功能是工作，我得到一個下拉列表，但表不創建，我看不到任何結果。ajax把自動完成的結果放到HTML表中

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"> 
<title>DMC</title> 


<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="style.css" /> 

</head> 

<body> 

    <div class="container"> 

     <div class="page-header"> 
     <h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;"> 
     <a href="http://www.codingcage.com/2016/12/autocomplete-search-with-href-link-php.html" target="_blank">DMC</a></h3> 
     </div> 

     <div class="row"> 

      <div class="col-lg-12 text-center"> 

       <div class="col-lg-offset-2"> 
       <form> 
       <div class="form-group"> 
        <div class="input-group"> 
        <input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." /> 
        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div> 
        </div> 
        <table border='1' id="table_body"></table> 
       </div> 
       </form> 
       </div> 

      </div> 

     </div> 

    </div> 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script> 

<script> 
$(document).ready(function(){ 

    $('#txtSearch').autocomplete({ 
     source: "post_search.php", 
     minLength: 1, 
     select: function(event, ui) { 
      var url = ui.item.id; 
      if (url != '#') { 
       location.href = url 
      } 

      var table = $("#table_body"); 
      $.each(data, function(event, ui){ 
      table.append("<tr><td>"+ui.item.value+"</td><td>"+ui.item.id+"</td>"); 
     }, 
     open: function(event, ui) { 
      $(".ui-autocomplete").css("z-index", 1000) 
     }  
    }) 

}); 
</script> 

</body> 
</html>

來源

2017-04-24 Kareem Essam Gaber

我用_renderMenu功能和$。每個函數內部它和它的工作就像一個魅力。

這裏是新代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"> 
<title>DMC</title> 


<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="style.css" /> 

</head> 

<body> 

    <div class="container"> 

     <div class="page-header"> 
     <h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;"> 
     <a href="http://www.codingcage.com/2016/12/autocomplete-search-with-href-link-php.html" target="_blank">DMC</a></h3> 
     </div> 

     <div class="row"> 

      <div class="col-lg-12 text-center"> 

       <div class="col-lg-offset-2"> 
       <form> 
       <div class="form-group"> 
       <div class="input-group"> 
       <input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." /> 
       <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div> 
       </div> 
       <table id="table_body" border='1'> 
       <thead> 
       <tr> 
       <th>City</th> 
       <th>Zip</th> 
       </tr> 
       </thead> 
       </table> 
       </div> 
       </form> 
       </div> 

      </div> 

     </div> 

    </div> 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script> 

<script> 
$(document).ready(function(){ 

    $('#txtSearch').autocomplete({ 
     source: "post_search.php", 
     minLength: 3 
    }).data("ui-autocomplete")._renderMenu = function (ul, items) { 
       $("#table_body tbody tr").remove(); 
       $.each(items, function(index, item) { 
        console.log(item); 
       var table = $("#table_body"); 
       if (item.id != '#') { 
       table.append("<tr><td>"+item.value+"</td><td>"+item.id+"</td>"); 
       } 
       }); 
      }; 

}); 
</script> 

</body> 
</html>

來源

2017-04-25 22:07:19

嘗試這樣的事情，希望它有助於

<table border='1'> 
    <thead> 
     <tr> 
      <td>value</td> 
      <td>id</td> 
     </tr> 
    </thead> 
    <tbody id="table_body"> 

    </tbody> 
</table> 

var data = ''; //initialize the data variable 
$.each(data, function(event, ui){ 
data += 
    "<tr>"+ 
    "<td>"+ui.item.value+"</td>"+ 
    "<td>"+ui.item.id+"</td>"+ 
    "</tr>"; 
} 

$('#table_body').html(data); //this will display your data to your body table

來源

2017-04-25 03:35:26

感謝您的幫助，但它不是我所期待的。 –

ajax把自動完成的結果放到HTML表中

回答

相關問題