Ajaxオートコンプリートを使用してビルドするにはどうすればよいですか？テーブル行。オートコンプリートコードが機能しています。ユーザーが値を検索して必要な値をクリックした場合、その値をテーブルに追加します。もう一度検索する場合は、最初の結果の下にその結果を追加したいと思います。しかし、応答からテーブル行を作成する方法が見つかりません。コードは次のとおりです。
もう1つ、私は息子のファイルを読んでいます。
これは私の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>誰かが私を助けてくれることを望んでいました。
回答：
回答№1は0私はjQueryUIにあまり詳しくありませんが、ドキュメントを読んだところ、このイベントリスナーで選択されたオプションの値を把握できることがわかりました。 http://api.jqueryui.com/autocomplete/#event-select.
デフォルトでは、選択したアイテムの値で入力を自動補完するだけですが、オブジェクト「ui」の値を取得してテーブルの行に追加することでカスタマイズできます。
ここに非常に明確な説明があります https://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete ページの終わりに。これがお役に立てば幸いです