Question

我已经创建了一个自动完成的文本框，并在其下面创建了一个div。当客户端从文本框中选择一个项目时，它在使用CSS样式化后自动出现在div中。我现在要做的是创建一个事件，当客户点击样式化的选定项目时，它们将消失。

这里是JS代码，以及它下面的jsfiddle，为了您的舒适。

`$(function() {
 /* Textbox ID */ $("#destinations").autocomplete({
    select: function (event, ui) {
    /* div ID */ $("#DestinationsChosen").html(function(i, origText)
    {
        var SelectedCountry = ui.item.value.toString();
        var CurrentText = origText.toString();
        if ((CurrentText.indexOf(SelectedCountry) >= 0))
        {
            alert("Already Exists");
            return CurrentText;
        }
        return CurrentText + " <span class='toButton'>" + SelectedCountry + "</span>";
    })
}

http://jsfiddle.net/dgu1ncsj/

谢谢:) 伊詹

Answer 1

您只需向每个所选项目添加 onclick 事件即可。我稍微修改了你的代码。请参阅下面的工作代码段：

$(function() {
$("#destinations").autocomplete({
    select: function (event, ui) {
        $("#DestinationsChosen").html(function(i, origText)
        {
            var SelectedCountry = ui.item.value.toString();
            var CurrentText = origText.toString();
            if ((CurrentText.indexOf(SelectedCountry) >= 0))
            {
                alert("Already Exists");
                return CurrentText;
            } 
            return CurrentText + " <span class='toButton' onclick='$(this).remove();'>" + SelectedCountry + "</span>";
        })
    }
});
})

Answer 2

此现有代码的最简单解决方案是添加以下行：

        $('.toButton').click(function(){$(this).remove(); });

在$（“＃DestinationsChosen”）之后.html（...）阻止。

我不建议将标记放在标记本身，因为它不是一个好习惯，因为它不会分离关注点。但我的简短回答也存在问题，因为它每次都会获得所有.toButtons并重新设置监听器。

更好的方法是将toButton创建为DOM节点，并将其附加到父div。这样，您就可以将侦听器放在节点本身上。

$(function() {
    $("#destinations").autocomplete({
        select: function (event, ui) {
            $("#DestinationsChosen").append(function(i, origText){
                var SelectedCountry = ui.item.value.toString();
                var CurrentText = origText.toString();
                if ((CurrentText.indexOf(SelectedCountry) >= 0))
                {
                    alert("Already Exists");
                }
                var destination = document.createElement('span');
                destination.classList.add('toButton');
                destination.appendChild( document.createTextNode(SelectedCountry));
                destination.addEventListener('click', function(){ this.remove(); });
                return destination;
            })
        }
    });
})

从列表中删除包含从自动完成文本框中选择的项目的项目

2 个答案: