why javascript array item removed automatically

Question

i have a text box with auto complete feature. when you start typing country name in text box drop down will apeear automatically by matching character. selected country name will appear to the next div automatically and removed from available list. in contrust you can remove country from selected list which will return back country name in drop down again. let me dive a bit technically.

i have used two array variables availableAllTags and availableTags which assign same value. in whole program i have not change availableAllTags values anywhere. but surprisingly i found every time when i select a country from drop down it removes from availableTags(perfect) and availableAllTags(surprising). but i need to become fixed availableAllTags array values all over my program.

http://jsfiddle.net/aminulsumon/w73yr/11/

  var availableAllTags = availableTags; //original array which data not changed anywhere
  var selected_item_ids=new Array();
  var country;
  var i;
  $(function() {
    $( "#country_name" ).autocomplete({     
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {              
           country=ui.item.value;  //$('#target').text( ui.item.value );
           $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
                " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
           //Add country id in selected_items array.
           alert(availableAllTags[0]);
           selected_item_ids.push(availableAllTags.indexOf(country));

           //Remove country name from availableTags array.
           i = availableAllTags.indexOf(country);
           availableTags.splice(i, 1);   //alert(availableTags[0]);
           if ( ui.item ){
              $(this).val('');
              return false;
           }
      }
    });
  });

  $(document).on('click','a.del_country', function(e) { 
    e.preventDefault();/* prevent browser opening href url*/

    //Select country name and delete from availableTags array
    var href_val = $(this).attr('href');
    var item_name = href_val.split('delete=')[1];    //alert(item_name);
    selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(item_name)), 1);

    /* remove parent span*/
    $(this).parent().remove();
    return false;
  });

  $(document).on('click','#show_selected_item_ids', function(e) { 
    var all_ids;
    all_ids="";
    $.each(selected_item_ids, function(index,value) {   
     all_ids = all_ids+ selected_item_ids[index]+ ",";
    });
    all_ids = all_ids.substring(0,all_ids.length - 1); // remove last ";" added
    $("#div_selected_ids").html("ids: "+all_ids);
  });

  $(document).on('click','#btnSelectAll', function(e) {
    selected_item_ids = [];
    $('#div_selected_country').html("");
    $.each(availableTags, function(index,value) {   
      selected_item_ids.push(availableAllTags.indexOf(value));   
      $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+value+
        " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
    });
  });

  $(document).on('click','#btnRemoveAll', function(e) {
    /*$.each(selected_item_ids, function(index,value) {   
      availableTags.push(availableAllTags.indexOf(value));
      selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(value)), 1);
    });*/
    selected_item_ids = [];
    availableTags = availableAllTags;
    $('#div_selected_country').html("");
    $('#div_selected_ids').html("");
  });
});

Answer 1

your array example assign values correctly but almost no code works accurately in IE8. have a look the fiddle (http://jsfiddle.net/aminulsumon/w73yr/14/). you see the when i start writing country name the drop down appears but when i select a country the drop down automatically doesn't go out.

  $(function() {
    $( "#country_name" ).autocomplete({
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {alert("control comes here");
           country=ui.item.value;  //$('#target').text( ui.item.value );
           $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
                " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
           //Add country id in selected_items array.
           selected_item_ids.push(availableAllTags.indexOf(country));

           //Remove country name from availableTags array.
           i = availableAllTags.indexOf(country);
           availableTags.splice(i, 1);   //alert(availableTags[0]);
           if ( ui.item ){
              $(this).val('');
              return false;
           }
      }
    });
  });

in the above code alert("control comes here"); line not executed along with many other lines.

Answer 2

actually in javascript, var x=y; means assign reference of y to x. so in order to assign value you have to use var x=y.slice();

Answer 3

Instead of using var availableAllTags = availableTags;, try this: var availableAllTags = availableTags.slice();.

Your current code make a new variable which holds reference to the same array instead of making a copy on it.

Answer 4

If I understand you correctly, you expect this line:

var availableAllTags = availableTags;

...to create a copy of the availableTags array and put it in the availableAllTags variable, but that's not how JS arrays (and other JS objects) work. What that line does is create a second reference to the same array.

To create a copy of the array you can use the .slice() method:

var availableAllTags = availableTags.slice(0);

Then within your Remove All button click handler where you currently try to reset the array by doing availableTags = availableAllTags you can again use .slice() to make a copy:

availableTags = availableAllTags.slice(0);