Question

我试图做这件事：

我有一个html输入文本框，一些php代码在我的数据库上进行查询并返回一个JSON元素，最后是一些我无法正确运行的javascript。

我只想在用户输入时进行实时搜索，而不是选择从实时搜索中找到的记录之一，并使用此记录的数据填充表单。

可能有一个非常简单的解决方案，但我是一个新手。

这是我的html和Javascript代码：

transform

这是一些示例输出，我希望能解释我的意思：

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>InChiaro Ticket Admin</title>
    <meta name="description" content="The HTML5 Herald" />
    <meta name="author" content="SitePoint" />
    <link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="../assets/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" />
    <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <link href="css/style-responsive.css" rel="stylesheet" />
    <link href="css/style-default.css" rel="stylesheet" id="style_color" />
    <link href="../assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
    <link href="../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <div id="main-content">
        <div class="wrapper-principale">
            <div class="input-append search-input-area">
                <input type="text" class="search-filter" id="searchcodiceCliente" name="codiceCliente" placeholder="Cerca un cliente..." /> <!-- text AREA CODICE CLIENTE-->
                <button class="btn" type="button"><i class="icon-search"></i> </button>
            </div>
            <div id="result" style="display:none">
                <table id="tablesearch"></table>
            </div>

            <form>
                <input type="text" id="CodiceCliente" />
                <input type="text" id="denominazione" />
            </form>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            // We add the event on the class, which both inputs have
            $(".search-filter").keyup(function () {
                // Now we get the values from both inputs, using their ID's
                var codiceCliente = $("#searchcodiceCliente").val();
                //var fname = $("#searchfname").val();

                // Add both to the dataString (and URI encode the strings)

                var requestCodCliente = "get_codiceCliente_json"
                var json;
                // Check that at least one has any content
                if (codiceCliente != '')


                    $.ajax({
                        type: "POST",
                        url: "ajax_requests.php",
                        data: {
                            request: requestCodCliente,
                            searchCliente: codiceCliente
                        },
                        success: function (result) {
                            var x = document.getElementById("result");
                            x.style.display = "inline";
                            document.getElementById("tablesearch").innerHTML = '';
                            var th = "<tr><th></th><th>Codice Cliente</th><th>Denominazione</th><th>Indirizzo</th><th>Città</th><th>CAP</th><th>Numero Telefono</th></tr>";
                            document.getElementById("tablesearch").innerHTML += th;
                            function populateForm() {
                                document.getElementById("CodiceCliente").value = result[index].codiceCliente;
                            }
                            for (var index = 0; index < result.length; ++index) {

                                var t = "";

                                var tr = "<tr>";
                                tr += "<td><button id='select' class='btn'type='button' onclick='populateForm()'><i class='icon-search'></i></button></td>";
                                tr += "<td>"+result[index].codiceCliente+"</td>";
                                tr += "<td>"+result[index].denominazioneCliente+"</td>";
                                tr += "<td>"+result[index].indirizzo+"</td>";
                                tr += "<td>"+result[index].citta+"</td>";
                                tr += "<td>"+result[index].CAP+"</td>";
                                tr += "<td>"+result[index].numeroTelefono+"</td>";
                                tr += "</tr>";
                                t += tr;

                                document.getElementById("tablesearch").innerHTML += t;

                                }
                        }
                    });

            });
        });

    </script>
</body>
</html>

谢谢

Answer 1

您最挣扎的方面是populateForm作为点击处理程序的附件。目前，onclick='populateForm()不会起作用，因为populateForm需要成为全球成员，并且不污染全局命名空间是一种好习惯。

为了解决这个问题，可以将点击处理委托给按钮的祖先元素＆＃39 ;; <table>元素是最明显的选择。幸运的是，jQuery有一个非常方便的事件委托语法。

此外，还有一个您可能不知道的问题;即多个快速AJAX请求不一定以预期的顺序响应。假设订单很重要，可以使用一种简单的机制来确保表条目按预期顺序。您所需要做的就是：

在发出每个AJAX请求时，同步附加<tbody>元素。
保留对每个附加<tbody>元素的引用（在闭包中）。
收到每个AJAX响应时，将行追加到相应的<tbody>元素。

您的代码应该是这样的：

$(function () {
    // Delegate handling of button.btn clicks to the containing table element. 
    // This avoids having to attach the same click handler repeatedly to buttons in dynamically generated lines.
    $("#tablesearch").on('click', 'button.btn', function() {
        $("#CodiceCliente").val($(this).closest('td').next('td').text());
    });

    $(".search-filter").keyup(function() {
        var codiceCliente = $(this).val();
        if (codiceCliente != '') {
            var $tbody = $('<tbody/>').appendTo("#tablesearch"); // Synchronously append a <tbody> to receive two asynchrously generated <tr>s (see below).
            $.ajax({
                'type': 'POST',
                'url': 'ajax_requests.php',
                'data': {
                    'request': 'get_codiceCliente_json',
                    'searchCliente': codiceCliente
                },
            }).then(function (result) {
                $("#result").css('display', "inline");
                $("<tr><th></th><th>Codice Cliente</th><th>Denominazione</th><th>Indirizzo</th><th>Città</th><th>CAP</th><th>Numero Telefono</th></tr>").appendTo($tbody); // append to the correct <tbody> for this response
                for (var i = 0; i < result.length; ++i) {
                    $("<tr><td><button class='btn'><i class='icon-search'></i></button></td><td>" + 
                    result[i].codiceCliente + "</td><td>" + 
                    result[i].denominazioneCliente + "</td><td>" + 
                    result[i].indirizzo + "</td><td>" + 
                    result[i].citta + "</td><td>" + 
                    result[i].CAP + "</td><td>" + 
                    result[i].numeroTelefono + "</td></tr>").appendTo($tbody); // append to the correct <tbody> for this response
                }
            }, function() {
                $tbody.remove(); // ajax failed so no point keeping the <tbody> element (unless you want to display an error message in the table)
            });
        }
    });
});

使用javascript在mySQL查询后填充表单

1 个答案: