Question

如何使用Ajax自动完成功能构建表格行。自动完成代码正在运行。如果用户搜索值并单击他们想要的值，我想在那里将该值添加到我的表中。如果他们再次搜索，我想在第一个结果下附加该结果。但我找不到从响应中构建表行的方法。这是代码。

还有一件事，我正在读儿子档案：

这是我的Ajax，jQuery代码

$.support.cors = true;
$(document).ready(function ($) {
    var items = [];
    $("#addclass").autocomplete({
        source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            $.ajax({
                url: "php/Classes.php",
                dataType: "json",
                beforeSend: function() {
                    $("#search-box").css("background","#C0C0C0");
                },
                success: function (data) {
                    response($.map(data, function (value, i) {
                        var text = value.value;
                        if (text && (!request.term || matcher.test(text))) {
                            return {
                                ID: value.ID,
                                value: value.value
                            };
                        }
                    }));         
                }
            });
        }
    });

    
});

table, th, td {
    margin: 0% 0px 0px 20%;
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 15px 0px;
}

th, td {
    padding: 4px 10px 4px 10px;;
    text-align: center;
}

This is my HTML code

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/profile.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://use.fontawesome.com/a8b13015aa.js"></script>
        
        <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
        <script>tinymce.init({selector: '#tinymce'});</script>
        <script type="text/javascript" src="script/profile.js"></script>
        <script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script>
        <script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script>
        <script src="script/profile.js"></script>
    </head>
    <body>
                    <div class="info">
                        <label id ="classes">My Classes</label>
                        <table class = "table">
                            <p></p>
                            <tr>
                                <th>Course ID</th>
                                <th>Course Name</th>
                                <th>Start Date/End Date</th>
                                <th>Credit Hours</th>
                            </tr>   
                        </table>
                        <br>
                        <label id ="activity">HIGHT AND ACTIVITY</label>
                        <label id = "search"><input type="text" name="addclass" id="addclass" placeholder="Search for course"/></label>
                        <div id ="suggesstion"></div>
                        <label></label>
                    </div>
        </section>
    </body>
</html>

我希望有些人可以帮助我。

Answer 1

我对jQuery UI并不熟悉，但我只是阅读了文档，发现您可以捕获使用此事件监听器选择的选项的值：http://api.jqueryui.com/autocomplete/#event-select。

默认情况下，它只是使用所选项的值自动填充输入，但您可以通过获取对象的值来自定义它＆＃34; ui＆＃34;并将其附加到表格行。

这是页面末尾非常明确的解释https://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete。我希望这可以帮助你

使用Ajax和jQuery自动完成从Ajax响应构建表行（Json）

1 个答案: