gpt4 book ai didi

javascript - 如何从自动完成列表中删除以前选择的项目

转载 作者:行者123 更新时间:2023-12-01 08:32:05 25 4
gpt4 key购买 nike

我正在使用 jquery 自动完成,我可以从自动完成中选择一个项目,并且我不希望之前选择的项目出现在自动完成下拉列表中。

例如:在下面的代码片段中的自动完成中,我输入“c++”并选择此项,单击按钮,然后在顶部添加一个带有输入元素的新行,其值为“c++”。现在当我再次输入时 自动完成中的“c++”我不希望出现“c++”以供选择。

这是代码片段

 let $selectedValue; 
let $ArraySample = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
function maintest () {

let $table = $('<table>').prop("id", "testTable");
let $row0 = $('<tr>').prop("id", "selectedRow").appendTo($table);
let $cell0 = $('<td>').appendTo($row0);
let $input2 = $("<input>").prop("id","input0").appendTo($cell0);
let $cell1 = $('<td>').appendTo($row0);

let $button = $("<button>").addClass('btn').text("Button").click(function() {
let $row1 = $('<tr>').insertBefore($("#selectedRow"));
let $cell2 = $('<td>').appendTo($row1);
let input3 = $("<input>").addClass("input1").prop("value",$selectedValue).appendTo($cell2);
}).appendTo($cell1);

$("#mainDiv").append($table);
$("#input0").autocomplete( {"source": $ArraySample ,
select:function(event, ui) {
$selectedValue = ui.item.value;
removeItem($selectedValue);
}
});
}

function removeItem($item) {

$ArraySample = $ArraySample.filter(function(item) {
return item !== $item;
})


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body onload="maintest()">
<div id="mainDiv"></div>
</body>

最佳答案

您的removeItem函数可能是错误的。看https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Array.splice方法

 let $selectedValue; 
let $ArraySample = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
function maintest () {

let $table = $('<table>').prop("id", "testTable");
let $row0 = $('<tr>').prop("id", "selectedRow").appendTo($table);
let $cell0 = $('<td>').appendTo($row0);
let $input2 = $("<input>").prop("id","input0").appendTo($cell0);
let $cell1 = $('<td>').appendTo($row0);

let $button = $("<button>").addClass('btn').text("Button").click(function() {
let $row1 = $('<tr>').insertBefore($("#selectedRow"));
let $cell2 = $('<td>').appendTo($row1);
let input3 = $("<input>").addClass("input1").prop("value",$selectedValue).appendTo($cell2);
}).appendTo($cell1);

$("#mainDiv").append($table);
$("#input0").autocomplete( {"source": $ArraySample ,
select:function(event, ui) {
$selectedValue = ui.item.value;
removeItem($selectedValue);
}
});
}

function removeItem($item) {

// ==== UPDATE HERE ===
$ArraySample.splice($ArraySample.indexOf($item),1)
// ==== UPDATE HERE END ===
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body onload="maintest()">
<div id="mainDiv"></div>
</body>

关于javascript - 如何从自动完成列表中删除以前选择的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60214183/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com