jquery - オートコンプリート（Facebookなど）が重複する値を放棄しました

Question

私はjQueryでオートコンプリート機能を使用しています（Facebookのように）。画像で述べたように、オートコンプリートで値が重複することは望ましくありません。

デモを参照http://wharsojo-js.googlecode.com/files/jquery.autocompletefb-0.1.1.zip

これが私のコードです：

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の作業デモ http://jsfiddle.net/Yvnfx/ またはアラートなし：http ：//jsfiddle.net/Yvnfx/1/ 削除にも注意を払う http://jsfiddle.net/wbQZU/4/

したがって、動作に関しては、Javaを選択した場合aotocomplete、使用可能なタグにJavaは表示されません。

重要なのは、その配列を作成してからusedItems、new array = existing array - used items

Jqueryコード

  **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)));
        },

完全なJqueryコード

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

更新されたJqueryコード（-の場合-アイテムを削除すると、使用可能なタグに追加されます。

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


​
​