我正在使用JQuery自动完成功能.在这里我想避免重复选择预选和预定位(预取)列表.
以下脚本适用于当前选择的列表.但是我该如何使用随文档加载而获取的预定位列表来完成此操作.
///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// /
JS
@H_404_11@$(document).on('focus','.search',function(){
let type = $(this).data('type');
$(this).autocomplete({
source: function( request,response ) {
$.ajax({
url : 'autocomplete.PHP',dataType: "json",method: 'post',data: {
name_startsWith: request.term,type: type
},success: function( data ) {
let selected = [],uniques = [],choices = [];
$('tr .search[id^="name_"]').each(function(){
let value = this.value.trim().toLowerCase();
if (value && selected.indexOf(value) < 0) {
selected.push(value);
}
});
data.forEach(item => {
let value = item.name.trim().toLowerCase();
if (uniques.indexOf(value) < 0 && selected.indexOf(value) < 0) {
choices.push({
label: item.name,value: item.name,data: item,type: 'name'
});
uniques.push(value);
}
});
response(choices);
}
});
},autoFocus: true,minLength: 1,select: function( event,ui ) {
// Strips the 'team_' part,leaving just the number.
let id_num = $(this).attr('id').substring(5);
$(this).val(ui.item.value);
$('#id_' + id_num).val(ui.item.data.id).change();
$('#marks_' + id_num).val(ui.item.data.marks);
$(this).attr('data-type',ui.item.type);
return false;
},appendTo: $(this).parent()
});
});
的HTML
@H_404_11@<table class="table table-bordered table-hover" id="pat_tests">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="number" id="id_1"> </td>
<td><input type="text" id="name_1" class="search" data-type="type"></td>
<td><input type="number" id="marks_1" ></td>
</tr>
<tr>
<td> <input type="number" id="id_2"> </td>
<td><input type="text" id="name_2" class="search" data-type="type"></td>
<td><input type="number" id="marks_2" ></td>
</tr>
<tr>
<td> <input type="number" id="id_3"> </td>
<td><input type="text" id="name_3" class="search" data-type="type"></td>
<td><input type="number" id="marks_3" ></td>
</tr>
</tbody>
</table>
<h2>Pre Selected List of Students</h2>
<p class="selected">Mario</p>
<p class="selected">Nico"</p>
<p class="selected">Mento</p>
的PHP
@H_404_11@if(!empty($_POST['type'])){
$type = $_POST['type'];
$name = $_POST['name_startsWith'];
$query = $db->prepare("SELECT id,name,marks FROM class where (name LIKE '".$name."%') ");
$query->execute();
$data = array();
$i = 0;
while ($row = $query->fetch(PDO:: FETCH_ASSOC)) {
$data[$i]['id'] = $row['id'];
$data[$i]['name'] = $row['name'];
$data[$i]['marks'] = $row['marks'];
++$i;
}
echo json_encode($data);
最佳答案
我建议在Js中使用一个数组,您可以在其中预先选择.然后使用它来验证是否尚未将其推入其中,然后可以将其添加到您的dom中.
所以在js中,您会遇到类似
@H_404_11@var selected = [<?= !empty($selected) ? '"'.implode('","',$selected).'"' : '' ?>];
脚本的第一行中的上述代码使数组为空或如果不为空则已被选中
然后您可以使用它来检查是否选择了一个项目.另外最好使用$selected = array_map(‘strtolower’,$selected);之前在PHP中(根据您的代码)
编辑
@H_404_11@<script type="text/javascript">
//in case you have PHP array of already selected items. remove it if $selected is not provided in PHP.
//var selected = [<?= !empty($selected) ? '"'.implode('",$selected).'"' : '' ?>];
var selected = [];
$(".selected").each(function(index,value){
selected.push($(this).text().trim().toLowerCase());
});
$(document).on('focus',function (e) {
let type = $(this).data('type');
$(this).autocomplete({
source: function (request,response) {
$.ajax({
url: 'your url',data: {
name_startsWith: request.term,type: type
},success: function (data) {
let uniques = [],choices = [];
data.forEach(function (item) {
let value = item.name.trim().toLowerCase();
if (uniques.indexOf(value) < 0 && selected.indexOf(value) < 0) {
choices.push({
label: item.name,type: 'name'
});
uniques.push(value);
}
});
response(choices);
}
});
},select: function (event,ui) {
// Strips the 'team_' part,leaving just the number.
let id_num = $(this).attr('id').substring(5);
$(this).val(ui.item.value);
$('#id_' + id_num).val(ui.item.data.id).change();
$('#marks_' + id_num).val(ui.item.data.marks);
$(this).attr('data-type',ui.item.type);
selected.push(ui.item.value.trim().toLowerCase());
return false;
},appendTo: $(this).parent()
});
});
</script>
如果将js加载为外部文件,请不要担心.只要确保定义
@H_404_11@<script>
var selected = [<?= !empty($selected) ? '"'.implode('",$selected).'"' : '' ?>];
</script>
在它之前.
