1
如何使用Ajax自動完成來構建錶行。自動完成代碼正在工作。如果用戶搜索值並單擊他們想要的值,我想將該值添加到我的表中。如果他們再次搜索,我想在第一個結果下追加該結果。但我無法找到一種方法從響應中構建表格行。這是代碼。使用Ajax和jQuery自動完成從Ajax響應(Json)構建錶行
還有一兩件事,我讀了一個兒子文件:
這是我的阿賈克斯,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>
我希望一些可以幫助我。