Wie kann ich die Ajax-Autovervollständigung verwenden, um eine zu erstellen?Tischreihe. Der Autocomplete-Code funktioniert. Wenn der Benutzer nach einem Wert sucht und auf den gewünschten Wert klickt, möchte ich diesen Wert genau dort zu meiner Tabelle hinzufügen. Wenn sie erneut suchen, möchte ich dieses Ergebnis unter das erste Ergebnis einfügen. Aber ich kann keinen Weg finden, eine Tabellenzeile aus der Antwort zu erstellen. Hier ist der Code.
Eine weitere Sache, ich lese eine Sohndatei:
Dies ist mein Ajax, jQuery-Code
$.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>Ich hatte gehofft, dass einige mir helfen könnten.
Antworten:
0 für die Antwort № 1Ich bin nicht so vertraut mit der jQuery-Benutzeroberfläche, aber ich habe gerade die Dokumentation gelesen und festgestellt, dass Sie den Wert der mit diesem Ereignis-Listener ausgewählten Option abrufen können: http://api.jqueryui.com/autocomplete/#event-select.
Standardmäßig wird die Eingabe nur automatisch mit dem Wert des ausgewählten Elements vervollständigt. Sie können sie jedoch anpassen, indem Sie den Wert des Objekts "ui" nehmen und an die Tabellenzeile anhängen.
Hier ist eine sehr klare Erklärung https://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete am Ende der Seite. Ich hoffe das hilft dir weiter