Как удалить ранее выбранные элементы из списка автозаполнения - PullRequest
1 голос
/ 13 февраля 2020

Я использую 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>

1 Ответ

2 голосов
/ 13 февраля 2020

Ваша функция 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...