如何用JS实现点击搜索结果将球队添加至ViewModel列表

现有代码已实现球队搜索功能，搜索结果以label形式展示在输入框下方，但无法将选中的球队添加至ViewModel列表并提交，需编写JavaScript完成该添加功能。

现有代码 #

JavaScript 逻辑 #

$(document.body).on('click', '.btn-create-tournament', function () {

    var title = $(".create-tournament-title").val();
    var format = $(".create-tournament-format").val();
    var sport = $(".create-tournament-sport").val();
    var prize = $(".create-tournament-prize").val();
    var date = $(".create-tournament-date").val();
    var location = $(".create-tournament-location").val();
    var teams = $(".create-tournament-teams").val();

    $.post('/Tournament/Create', {
        title: title,
        format: format,
        sport: sport,
        prize: prize,
        date: date,
        location: location,
        teams: teams
    }, function (response) {
        if (response > 0) {
            window.location.href = "/Tournament/Details/" + response;
        }
    })

}).on('input', '.search-teams', function () {
    var query = this.value;
    $.get('/Teams/Search', { name: query }, function (response) {
        $('.search-team-results').html($(response).find('.team-results-search').html());
    })
})

搜索结果 Partial View #

@model List<TeamViewModel>

<div class="search-team-results">
    @foreach (var item in Model)
    {
        <div>
            <label class="team-results-search" data-team-id="@item.Id">@item.Name</label>
        </div>
    }
</div>

主视图搜索区域 #

<h6>Players</h6>

<div class="form-outline">
    <input class="search-teams" type="search" placeholder="Type query" aria-label="Search" />
    <div class="search-team-results"></div>
</div>

要实现选中球队的添加、展示和提交，需完成以下三步：

1. 修改主视图，添加已选容器和隐藏输入框 #

在搜索区域下方新增展示已选球队的容器，以及用于存储选中球队ID的隐藏输入框（提交时传给后端）：

<h6>Players</h6>

<div class="form-outline">
    <input class="search-teams" type="search" placeholder="Type query" aria-label="Search" />
    <div class="search-team-results"></div>
</div>

<!-- 新增：已选球队展示区 -->
<div class="selected-teams mt-3">
    <h6>已选球队</h6>
    <div id="selected-teams-list" class="d-flex flex-wrap gap-2"></div>
</div>

<!-- 新增：隐藏输入框，存储选中球队ID（逗号分隔） -->
<input type="hidden" class="create-tournament-teams" name="teams" value="" />

2. 扩展JavaScript逻辑，实现选中/移除功能 #

在原有JS代码中添加点击搜索结果的处理逻辑，以及移除已选球队的逻辑：

$(document.body)
// 原有创建锦标赛提交逻辑
.on('click', '.btn-create-tournament', function () {
    var title = $(".create-tournament-title").val();
    var format = $(".create-tournament-format").val();
    var sport = $(".create-tournament-sport").val();
    var prize = $(".create-tournament-prize").val();
    var date = $(".create-tournament-date").val();
    var location = $(".create-tournament-location").val();
    // 从隐藏输入框获取选中的球队ID列表
    var teams = $(".create-tournament-teams").val();

    $.post('/Tournament/Create', {
        title: title,
        format: format,
        sport: sport,
        prize: prize,
        date: date,
        location: location,
        teams: teams
    }, function (response) {
        if (response > 0) {
            window.location.href = "/Tournament/Details/" + response;
        }
    })
})
// 原有搜索输入逻辑
.on('input', '.search-teams', function () {
    var query = this.value;
    $.get('/Teams/Search', { name: query }, function (response) {
        $('.search-team-results').html($(response).find('.team-results-search').parent().parent().html());
    })
})
// 新增：点击搜索结果添加球队到已选列表
.on('click', '.team-results-search', function () {
    const teamId = $(this).data('team-id');
    const teamName = $(this).text();
    const $selectedList = $('#selected-teams-list');
    const $hiddenInput = $('.create-tournament-teams');

    // 避免重复添加
    if ($selectedList.find(`.team-tag[data-team-id="${teamId}"]`).length === 0) {
        // 创建带移除按钮的球队标签
        const teamTag = `
            <div class="team-tag badge bg-primary d-flex align-items-center gap-1" data-team-id="${teamId}">
                ${teamName}
                <button type="button" class="btn-close btn-close-white btn-sm" aria-label="移除"></button>
            </div>
        `;
        $selectedList.append(teamTag);

        // 更新隐藏输入框的ID列表
        const currentTeams = $hiddenInput.val().split(',').filter(id => id.trim() !== '');
        currentTeams.push(teamId);
        $hiddenInput.val(currentTeams.join(','));
    }

    // 可选：清空搜索框和结果
    $('.search-teams').val('');
    $('.search-team-results').empty();
})
// 新增：移除已选球队
.on('click', '.team-tag .btn-close', function () {
    const $teamTag = $(this).closest('.team-tag');
    const teamId = $teamTag.data('team-id');
    const $hiddenInput = $('.create-tournament-teams');

    // 移除标签
    $teamTag.remove();

    // 更新隐藏输入框的ID列表
    const currentTeams = $hiddenInput.val().split(',').filter(id => id !== teamId.toString());
    $hiddenInput.val(currentTeams.join(','));
});

3. 后端适配 #

确保你的锦标赛创建ViewModel包含teams属性（可设为string或List<int>类型），后端/Tournament/Create接口能正确接收该参数。如果是字符串格式，后端可将逗号分隔的ID转为整数列表处理。

内容的提问来源于stack exchange，提问作者Brunny