从多列自动完成建议并防止重复

Question

我想从 MySql 数据库表的两列中自动完成值，一列有多个相似的值，在自动完成窗口中，如果相似，它应该只显示一个相似的值。并且在选择后不应该在下一行的自动完成窗口中建议它。

HTML

<tr>
    <td><input type="text" data-type="aTeam"  id="team_1" class="team"></td>
    <td><input type="text"  id="score_1" ></td>
</tr>
<button type="button" id="addRow">Add Row</button>

JS

$(document).on('focus','.team',function(){
var type = $(this).data('type');
if(type ==='aTeam' )autoTypeNo= 0;
$(this).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'fetch.php',
            dataType: "json",
            method: 'post',
            data: {
               name_startsWith: request.term,
               type: type
            },
             success: function( data ) {
                 response( $.map( data, function( item ) {
                    return {
                        label: item.aTeam,
                        value: item.aTeam,
                        data : item
                    };
                }));
            }
        });
    },
    autoFocus: true,            
    minLength: 1,
    select: function( event, ui ) {                         
        id_arr = $(this).attr('id');
        id = id_arr.split("_");
        $('#team_'+id[1]).val(ui.item.data.aTeam);
        $('#score_'+id[1]).val(ui.item.data.score);
    }               
  });
});

//add row
   var i=$('table tr').length;
   $("#addRow").on('click',function(){
       html = '<tr>';
       html += '<td><input type="text" data-type="aTeam" id="team_'+i+'" class="team"></td>';
       html += '<td><input type="text" id="score_'+i+'"></td>';
       html += '</tr>';
       $('table').append(html);
       i++;
   });

PHP

<?php
    require_once("config.php");

    if(!empty($_POST['type'])){
       $type = $_POST['type'];
       $name = $_POST['name_startsWith'];
       $query = $db->prepare("SELECT aTeam, bTeam FROM teams where UPPER($type) LIKE '".strtoupper($name)."%' limit 10 ");
       $query->execute();
       $data= array();

   $i = 0;
       while ($row = $query->fetch(PDO:: FETCH_ASSOC)) {

           $data[$i]['aTeam'] = $row['aTeam'];
           $data[$i]['bTeam'] = $row['bTeam'];
           $data[$i]['score'] = $row['score'];
   ++$i;
       }  
       echo json_encode($data);
  }

Answer 1

试试这个：（阅读 // {comment here} 并将代码与您的代码进行比较，看看有什么变化）

$(document).on('focus','.team',function(){
let type = $(this).data('type');

// `autoTypeNo` isn't used anywhere, so I commented out this.
//if(type ==='aTeam' )autoTypeNo= 0;

$(this).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'fetch.php',
            dataType: "json",
            method: 'post',
            data: {
               name_startsWith: request.term,
               type: type
            },
             success: function( data ) {
               let selected = [],
                   uniques = [],
                   choices = [];

               $('tr .team[id^="team_"]').each(function(){
                 let value = this.value.trim().toLowerCase();
                 if (value && selected.indexOf(value) < 0) {
                   selected.push(value);
                 }
               });

               data.forEach(item => {
                 let value = item.aTeam.trim().toLowerCase(),
                     value2 = item.bTeam.trim().toLowerCase();

                 if (uniques.indexOf(value) < 0 && selected.indexOf(value) < 0) {
                   choices.push({
                     label: item.aTeam,
                     value: item.aTeam,
                     data: item,
                     type: 'aTeam'
                   });
                   uniques.push(value);
                 }

                 if (uniques.indexOf(value2) < 0 && selected.indexOf(value2) < 0) {
                   choices.push({
                     label: item.bTeam,
                     value: item.bTeam,
                     data: item,
                     type: 'bTeam'
                   });
                   uniques.push(value2);
                 }
               });

               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);
        $('#score_' + id_num).val(ui.item.data.score);
        $(this).attr('data-type', ui.item.type); // Change to the correct type?

        // Cancels default action, so that the above `jQuery.val()` call works.
        return false;
    }
  });
});

//add row
// 'i' is too generic, so I renamed it to 'row_num'.
   var row_num=$('table tr').length;
   $("#addRow").on('click',function(){
       // Increment before used.
       row_num++;

       let html = '<tr>';
       html += '<td><input type="text" data-type="aTeam" id="team_' + row_num + '" class="team"></td>';
       html += '<td><input type="text" id="score_' + row_num + '"></td>';
       html += '</tr>';
       $('table').append(html);

       // Optional, but I like to focus on the `input` in the row that was just added.
       $('#team_' + row_num).select();
   });

更新

我更新了JS代码（上图）。

请注意，对于 PHP 部分，我将 $query 更改为：

$query = $db->prepare("SELECT aTeam, bTeam FROM teams where UPPER($type) LIKE '".strtoupper($name)."%' limit 10 ");

到：

$query = $db->prepare("SELECT aTeam, bTeam, score FROM teams where ( aTeam LIKE '".$name."%' OR bTeam LIKE '".$name."%' ) limit 10 ");

因为没有OR bTeam LIKE '".$name."%'，例如，如果您输入“d”并且没有以“d”开头的aTeam，那么您就知道会发生什么了..