自动填充（如Facebook）已放弃重复值

我在jQuery中使用自动完成function（很像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; } }); });​​  $(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; } }); });​​