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

回答

相關問題