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 数组，然后创建一个新数组 = 现有数组 - 使用过的项目

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

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


​
​