CODEWITHSUNDEEP
javascriptjqueryhtml
karansys
karansys

Reputation: 2719

How to remove previously selected items from autocomplete list

I am using jquery autocomplete, I can select an item from autocomplete and I don't want the previously selected item appear in autocomplete dropdown.

For ex: From autocomplete here in the code snippet below, I type "c++" and select this item, I click on the button then a new row with input element is added on top with value "c++". Now when I type once again "c++" in the autocomplete I don't want "c++" to appear for selection.

Here is the code snippet

 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>

Upvotes: 1

Views: 163

Answers (1)

Hasan Delibaş
Hasan Delibaş

Reputation: 500

Your removeItem function may be wrong. Look https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Array.splice method

 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>

Upvotes: 2

Related Questions