How to avoid duplication of values while adding multiple values to a textbox dynamically in javascript?

Question

I am trying to add multiple values to a hidden field. It's working fine, but I want the values which are getting added in the hidden field to be unique and not to get added if a value is entered more than once.

interestedin is the name of the selectbox where the values are selected and interest is the id of the hiddenfield where the values are getting added as comma separated values while selecting options in the selectbox.

if a same option is selected twice, it's getting added in the hidden field twice. I don't want any values to get added in the hidden fields though its selected twice.

the function clicker is called while selecting the values in the select box(name="interestedin") and the values will be added in the hidden field (id="interest")

function clicker(){
            var itemsobj=document.getElementsByName("interestedin[]");
            str='';
            //alert(itemsobj[0].value);
            //alert('test');
            count=0;
            var arr = new Array();
    for(var i=0;i<itemsobj.length;i++)
        {
            count += 1;
            str +=itemsobj[i].value+',';
            //alert(str);
            arr[i] = itemsobj[i].value; 
                }
            var length=str.length;
            var strr=str.substring(0,length-1);
            document.getElementById('interest').value = strr;
            //alert(strr);


            setProductPrice(arr,count);
        }

Answer 1

Hiya sup man hope this helps as I just resolved for some demo http://jsfiddle.net/Yvnfx/ or without alert http://jsfiddle.net/Yvnfx/1/

For case - if you deleted the selected autocomplete http://jsfiddle.net/wbQZU/4/

Autocomplete (like facebook) has give up a duplicate value

Idea is to created NewArray = AvailableTagsArray - UsedItemArray

This will help and hope demo makes it more clear,! B-)

Jquery code to avoid duplicate array

**var usedItems = []**
:
:// then
source: function(request, response) {

      //build new array with = AvailableTagsArray - UsedItemArray
             var newNonDuplicatetag = $.grep(availableTags, function(el){return $.inArray(el, usedItems) == -1});

            // delegate back to autocomplete, but extract the last term
            response($.ui.autocomplete.filter(
            newNonDuplicatetag, extractLast(request.term)));
        },

Full Jquery from my demo

$(function() {
    var usedItems = [];

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];

    function split(val) {
        return val.split(/,\s*/);
    }

    function extractLast(term) {
        return split(term).pop();
    }


    $("#tags")
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function(event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        source: function(request, response) {
             var newNonDuplicatetag = $.grep(availableTags, function(el){return $.inArray(el, usedItems) == -1}); 
            // delegate back to autocomplete, but extract the last term
            response($.ui.autocomplete.filter(
            newNonDuplicatetag, extractLast(request.term)));
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
        select: function(event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            usedItems.push(ui.item.value);
            alert(usedItems[1]);
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });
});


​