jQuery的自动完成：基于ID

隐藏物品我有一些对象具有这样相同的“ID”属性的数组：jQuery的自动完成：基于ID

var regions = [ 
    {'id': 1, 'value': 'Ankara'}, 
    {'id': 2, 'value': 'İstanbul'}, 
    {'id': 2, 'value': 'Istanbul'} 
]

我尝试只显示一定的ID的第一个目的，如果有是重复的（在这种情况下，我想显示'伊斯坦布尔'，但不是'伊斯坦布尔'）。我试图用源属性里面的功能，但我失败了，我不知道要明白的地方，我需要做这...这里是一个片段：

var regions = [ 
 
\t {'id': 1, 'value': 'Ankara'}, 
 
\t {'id': 2, 'value': 'İstanbul'}, 
 
\t {'id': 2, 'value': 'Istanbul'} 
 
] 
 

 
$('#myInput').autocomplete({ 
 
\t source: regions 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<input type="text" placeholder="type here ..." id="myInput">

任何帮助将不胜感激。谢谢。

来源

2015-09-28 Mehdi Brillaud

你需要对象的数组去欺骗你提供给它的'source'参数之前。看到这个问题的细节：http://stackoverflow.com/questions/2218999/remove-duplicates-from-an-array-of-objects-in-javascript –

你不能只过滤'地区'排除重复的项目？ – raina77ow

由于特殊字符，我需要保留数组中的所有项目。如果我从数组中删除'istanbul'并且用户类型'ist'，则不显示'伊斯坦布尔'。因为这个原因，后端开发人员向我发送每个区域的'原始'版本。 –

这可能是您的解决方案。我创建了一个函数，它会根据属性从数组中删除重复项。函数将向uniqueArray添加唯一对象，忽略具有相同id的所有下一项。

之后，我将uniqueArray传递给jQuery自动完成。

记住Array.reduce工作在IE9 +

随意问，如果你有任何问题。

var regions = [ 
 
\t {'id': 1, 'value': 'Ankara'}, 
 
\t {'id': 2, 'value': 'İstanbul'}, 
 
\t {'id': 2, 'value': 'Istanbul'} 
 
] 
 

 
var uniqueRegions = removeDuplicates(regions, 'id') 
 

 
function removeDuplicates(arr, field) { 
 
    var u = []; 
 
    arr.reduce(function (a, b) { 
 
     if (a[field] !== b[field]) { 
 
      u.push(b); 
 
     } 
 
     return b; 
 
    }, []); 
 
    return u; 
 
} 
 

 
$('#myInput').autocomplete({ 
 
\t source: uniqueRegions 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<input type="text" placeholder="type here ..." id="myInput">

来源

2015-09-29 03:05:34 Wlada

非常感谢你，但正如我在评论中说的，我需要将所有项目传递到插件并仅显示每个ID的项目。然而，有人给了我一个提示，我设法达到了我想要做的，所以我会写一个答案。再次感谢 ;） –

由于vijayP在评论中，我成功地实现了我所用_renderItem做。

首先，你需要一个变量来存储这样的：

var autoComplete = $('#myInput').autocomplete({});

然后你就可以在其上使用_renderItem，所以你可以自定义插件生成的列表：

autoComplete.autocomplete("instance")._renderItem = function(ul, item) { 
    //Do your stuff 
}

现在你可以在公开赛中做你需要的东西。

这是一个完整的片段：

var regions = [{ 
 
    'id': 1, 
 
    'value': 'Ankara' 
 
}, { 
 
    'id': 2, 
 
    'value': 'İstanbul' 
 
}, { 
 
    'id': 2, 
 
    'value': 'Istanbul' 
 
}] 
 

 
var autoComplete = $('#myInput').autocomplete({ 
 
    source: regions, 
 
    open: function(event, ui) { 
 
    var $ul = $('#regions'); 
 
    $ul.find('li').each(function(id, region) { 
 
     var dataID = $(region).attr('data-id'); 
 
     var items = $ul.find('[data-id="' + dataID + '"]'); 
 
     console.log($(items).length); 
 
     if ($(items).length > 1) { 
 
     $(items).hide(); 
 
     $(items).first().show(); 
 
     } 
 
    }); 
 
    }, 
 
    messages: { 
 
    noResults: '', 
 
    results: function() {} 
 
    } 
 
}) 
 
autoComplete.autocomplete("instance")._renderItem = function(ul, item) { 
 
    var $ul = $(ul).prop('id', 'regions') 
 
    return $('<li data-id="' + item.id + '">') 
 
    .append(item.value) 
 
    .appendTo($ul); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
 
<input type="text" placeholder="type here ..." id="myInput">

来源

2015-09-29 08:28:53

jQuery的自动完成：基于ID

回答

相关问题