javascript-自动完成如何避免重复选择

我正在使用JQuery自动完成功能.在这里我想避免重复选择预选和预定位(预取)列表.

以下脚本适用于当前选择的列表.但是我该如何使用随文档加载而获取的预定位列表来完成此操作.

///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// /

JS

$(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

<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

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中,您会遇到类似

var selected = [<?= !empty($selected) ? '"'.implode('","',$selected).'"' : '' ?>];

脚本的第一行中的上述代码使数组为空或如果不为空则已被选中
然后您可以使用它来检查是否选择了一个项目.另外最好使用$selected = array_map(‘strtolower’,$selected);之前在PHP中(根据您的代码)

编辑

<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加载为外部文件,请不要担心.只要确保定义

<script>
    var selected = [<?= !empty($selected) ? '"'.implode('",$selected).'"' : '' ?>];
</script>

在它之前.