自动完成（如Facebook）已放弃重复值 [英] Autocomplete (like facebook) has give up a duplicate value
本文介绍了自动完成（如Facebook）已放弃重复值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用jQuery中（就像Facebook）的自动完成功能。
正如我在图像提，我不希望在自动完成重复的值。
看到演示的http://wharsojo-js.google$c$c.com/files/jquery.autocompletefb-0.1.1.zip
下面是我的code：
jQuery.noConflict（）; jQuery的（文件）。就绪（函数（） { VAR I =的document.getElementById（'autocomplete_1'）的innerHTML。 VAR ACFB = jQuery的（ul.first）。autoCompletefb（ { urlLookup：i.split（，）， deleteimgurl：deleteimg /， } ）; jQuery的（＃ACFB输入）.blur（函数（） { 。的document.getElementById（'auto_complete_text'）值= acfb.getData（）; }）; }）;
解决方案
你好工作演示 HTTP ：//jsfiddle.net/Yvnfx/ 或无警报： HTTP： //jsfiddle.net/Yvnfx/1/ 照顾缺失以及的 http://jsfiddle.net/wbQZU/4/
所以，明智的行为：如果选择Java中的 aotocomplete 在可用标签将不会显示的Java
关键是创建 usedItems 的一个数组，然后做出新数组=现有阵列 - 使用过的物品
希望这有助于不要忘记了投票，并接受bruv！ :)有一个好一个，麦片！
Jquery的code
** VAR usedItems = [] **
：
：// 然后
来源：函数（请求，响应）{ // ===＆LT;＆GT;阅读：用= AvailableTagsArray建立新的阵列 - UsedItemArray
VAR newNonDuplicatetag = $ .grep（availableTags，功能（EL）{$返回.inArray（EL，usedItems）== -1}）; //后向委托自动完成，但提取的最后一届
响应（$。ui.autocomplete.filter（
newNonDuplicatetag，extractLast（request.term）））;
}，
全部Jquery的code
$（函数（）{
变种usedItems = []; VAR availableTags = [
动作，
AppleScript的
ASP
BASIC，
C，
C ++，
Clojure的
COBOL
ColdFusion的
二郎
FORTRAN，
常规
哈斯克尔
Java的，
JavaScript的
Lisp的，
Perl的
PHP
蟒蛇，
红宝石，
斯卡拉
方案
]; 函数split（VAL）{
返回val.split（/ \\ S * /）;
} 功能extractLast（项）{
返回拆分（项）.pop（）;
}
$（＃标签）
//选择项目时，不要从导航选项卡上的离场
.bind（的keydown，函数（事件）{
如果（event.key code $ === .ui.key code.TAB＆放大器;＆安培; $（本）。数据（自动完成）menu.active。）{
。事件preventDefault（）;
}
}）。自动完成（{
的minLength：0，
来源：函数（请求，响应）{
VAR newNonDuplicatetag = $ .grep（availableTags，功能（EL）{$返回.inArray（EL，usedItems）== -1}）;
//后向委托自动完成，但提取的最后一届
响应（$。ui.autocomplete.filter（
newNonDuplicatetag，extractLast（request.term）））;
}，
重点：函数（）{
// prevent值插入焦点
返回false;
}，
选择：函数（事件，UI）{
VAR而言=拆分（THIS.VALUE）;
//删除当前输入
terms.pop（）;
//添加所选项目
usedItems.push（ui.item.value）;
警报（usedItems [1]）;
terms.push（ui.item.value）;
//添加占位符来获得在最后逗号和空格
terms.push（）;
THIS.VALUE = terms.join（，）;
返回false;
}
}）;
}）;
更新jQuery的code （以深圳为例 - 当你删除的项
那么它应该是由于重新添加到可用标签$（函数（）{
变种usedItems = []; VAR availableTags = [
动作，
AppleScript的
ASP
BASIC，
C，
C ++，
Clojure的
COBOL
ColdFusion的
二郎
FORTRAN，
常规
哈斯克尔
Java的，
JavaScript的
Lisp的，
Perl的
PHP
蟒蛇，
红宝石，
斯卡拉
方案
]; 函数split（VAL）{
返回val.split（/ \\ S * /）;
} 功能extractLast（项）{
返回拆分（项）.pop（）;
}
$（＃标签）
//选择项目时，不要从导航选项卡上的离场
.bind（的keydown，函数（事件）{
如果（event.key code $ === .ui.key code.TAB＆放大器;＆安培; $（本）。数据（自动完成）menu.active。）{
。事件preventDefault（）;
}
}）。自动完成（{
的minLength：0，
来源：函数（请求，响应）{ //当dleted我们要添加的code回用标签来处理此案。
VAR tempTags = $（'＃标签）VAL（）分（''）。;
VAR newNonDuplicatetag1 = $ .grep（usedItems，功能（EL）{$返回.inArray（EL，tempTags）！= -1}）;
//建立新的可用标签 - （减号）这里使用的标签
VAR newNonDuplicatetag = $ .grep（availableTags，功能（EL）{$返回.inArray（EL，newNonDuplicatetag1）== -1}）;
//后向委托自动完成，但提取的最后一届
响应（$。ui.autocomplete.filter（
newNonDuplicatetag，extractLast（request.term）））;
}，
重点：函数（）{
// prevent值插入焦点
返回false;
}，
选择：函数（事件，UI）{
VAR而言=拆分（THIS.VALUE）;
//删除当前输入
terms.pop（）;
//添加所选项目
usedItems.push（ui.item.value）;
//警报（usedItems [1]）;
terms.push（ui.item.value）;
//添加占位符来获得在最后逗号和空格
terms.push（）;
THIS.VALUE = terms.join（，）;
返回false;
}
}）;
}）;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(); }); });解决方案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
aotocompletewill not show java in available tags.key is to create an array of
usedItemswhich and then make anew array = existing array - used itemsHope this helps and don't forget to up vote and accept bruv! :) have a nice one, cheerios!
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; } }); });
这篇关于自动完成（如Facebook）已放弃重复值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
