Я пытаюсь реализовать функцию автозавершения ajax для моего HTML-кода, я хочу поместить результат функции автозаполнения в таблицу на моей 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>
1
Kareem Essam Gaber 24 Апр 2017 в 23:32

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>
0
Kareem Essam Gaber 25 Апр 2017 в 22:07

Попробуйте что-то вроде этого, надеюсь, это поможет

<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
1
Genina Anne Gabuten 25 Апр 2017 в 03:35
43597209