Question

我正在尝试对我的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>

Answer 1

尝试这样的事情希望它有所帮助

<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

Answer 2

我在其中使用了_renderMenu函数和$ .each函数，它就像一个魅力。

这是新代码：

<!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>

ajax将自动完成结果放入HTML表格中

2 个答案: