Question

I am using Autocomplete function in jQuery (much like Facebook).
As I mention in image, I don’t want duplicate values in the Autocomplete.

see demo http://wharsojo-js.googlecode.com/files/jquery.autocompletefb-0.1.1.zip

Here is my code:

jQuery.noConflict();

        jQuery(document).ready(function()

        {

              var i=document.getElementById('autocomplete_1').innerHTML;

             var acfb =

                        jQuery("ul.first").autoCompletefb(

                        {

                            urlLookup:i.split(','),

                            deleteimgurl:"deleteimg/",

                        }

                        );  

                     jQuery("#acfb-input" ).blur(function()

                     {

                        document.getElementById('auto_complete_text').value=acfb.getData(); 

                    }); 

                 });

Answer 1

Hiya working demo http://jsfiddle.net/Yvnfx/ or without alert: http://jsfiddle.net/Yvnfx/1/ Taking care of deletion as well http://jsfiddle.net/wbQZU/4/

So behavior wise: if you selected java the aotocomplete will not show java in available tags.

key is to create an array of usedItems which and then make a new array = existing array - used items

Jquery code

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

      //===<> Read: 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 code

$(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;
        }
    });
});

Updated Jquery code (WIth the case of – when you delete the item
then it should due added back to available tags

$(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) {

   //to handle the case when dleted We want to add the code back to available tags.
            var tempTags = $('#tags').val().split(',');
       var newNonDuplicatetag1 = $.grep(usedItems, function(el){return $.inArray(el, tempTags) != -1}); 
     // build new available tag -(minus) used tag here                                                           
      var newNonDuplicatetag = $.grep(availableTags, function(el){return $.inArray(el, newNonDuplicatetag1) == -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;
        }
    });
});


​
​