автозаполнение Как избежать дублирования выбора

Question

Я использую автозаполнение JQuery. В котором я хочу избежать дублирования выбора предварительно выбранного и предварительно расположенного (предварительно извлеченного) списка.

Следующий скрипт работает с текущим выбранным списком. Но как я могу сделать это с предварительно расположенным списком, который выбирается с document onload.

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

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);

Answer 1

Рекомендую использовать массив в Js, в него можно поместить предварительно выбранный. а затем используйте его, чтобы убедиться, что если он еще не выбран, добавьте его в свой домен.

так что в js у вас будет что-то вроде

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

код выше в первой строке скрипта делает массив пустым или уже выбранным, если выбран не пустой затем вы можете использовать его, чтобы проверить, выбран элемент или нет. также лучше использовать $selected = array_map('strtolower', $selected); до этого в php (согласно вашему коду)

EDIT

<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', '.search', function (e) {
        let type = $(this).data('type');
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: 'your url',
                    dataType: "json",
                    method: 'post',
                    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,
                                    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);
                selected.push(ui.item.value.trim().toLowerCase());
                return false;
            },
            appendTo: $(this).parent()
        });
    });
</script>

Не беспокойтесь, если вы загружаете js как внешний файл. просто убедитесь, что определите

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

перед этим.

Answer 2

Обновленный ответ: поскольку вы изменили свой HTML, решение может быть основано на:

if ($('.selected:contains(' + value + ')').length == 0) {

Обновленный фрагмент:

$(document).on('focus', '.search', function (e) {
    let type = $(this).data('type');
    $(this).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: 'https://api.github.com/repositories?since=364',
                dataType: "json",
                method: 'get',
                data: {
                    name_startsWith: request.term,
                    type: type
                },
                success: function (data) {
                    data = data.map((a) => ({name: a.name || ''})).filter((e) => e.name.indexOf('_') == -1);
                    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(function (item) {
                        let value = item.name.trim().toLowerCase();
                        if (uniques.indexOf(value) < 0 && selected.indexOf(value) < 0) {
                            if ($('.selected:contains(' + value + ')').length == 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()
    });
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<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">invisible</p>
<p class="selected">tinder</p>
<p class="selected">ike</p>

Попробуйте выбрать трут, только для теста.

Старый ответ:

Первая проблема: вы инициализируете автозаполнениена каждом фокусном событии!Пожалуйста, избегайте его инициализации несколько раз.

Если я правильно понял, вы хотите удалить из списка автозаполнения элементы, значения которых уже содержатся в одном из Предварительно выбранный список студентов .Если это так, вы можете добавить до choices.push ({ тест:

if ($('.selected:text[value="' + item.name + '"]').length == 0) {

Полный код:

$(document).on('focus', '.search', function (e) {
    let type = $(this).data('type');
    $(this).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: 'your url',
                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(function (item) {
                        let value = item.name.trim().toLowerCase();
                        if (uniques.indexOf(value) < 0 && selected.indexOf(value) < 0) {
                            if ($('.selected:text[value="' + item.name + '"]').length == 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()
    });
});