jQuery自动完成：根据ID隐藏项目答案

【问题标题】：jQuery autocomplete : hide items based on IDjQuery自动完成：根据ID隐藏项目
【发布时间】：2015-12-25 10:58:54
【问题描述】：

我有一个数组，其中包含一些具有相同“id”属性的对象，如下所示：

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

如果有重复，我会尝试仅显示某个 ID 的第一个对象（在这种情况下，我想显示“İstanbul”而不是“Istanbul”）。我尝试在源属性中使用一个函数，但我失败了，我不确定我需要在哪里执行此操作......这是一个 sn-p ：

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

$('#myInput').autocomplete({
	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">

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

【问题讨论】：

在将对象数组作为source 参数提供之前，您需要对其进行重复数据删除。详情见这个问题：stackoverflow.com/questions/2218999/…
您不能只过滤regions 以排除重复项吗？
由于特殊字符，我需要保留数组中的所有项目。如果我从数组中删除“istanbul”并且用户类型“ist”，则不会显示“İstanbul”。因此，后端开发人员向我发送了每个区域的“原始”版本。
在这种情况下，您可能需要修改自动完成的来源（或完全使用不同的插件），因为我认为它不支持每个 id 的多个值。
也许这就是你要找的东西：jqueryui.com/autocomplete/#folding 查看示例

标签： javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

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

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

请记住 Array.reduce 适用于 IE9+

如果您有任何问题，请随时提出。

var regions = [
	{'id': 1, 'value': 'Ankara'},
	{'id': 2, 'value': 'İstanbul'},
	{'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({
	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">

【讨论】：

非常感谢，但正如我在评论中所说，我需要将所有项目传递到插件中，并仅在每个 ID 的项目上显示。但是有人给了我一个提示，我设法实现了我试图做的事情，所以我会写一个答案。再次感谢；）

【解决方案2】：

感谢 cmets 中的 vijayP，我设法实现了我尝试用 _renderItem 做的事情。

首先，你需要像这样存储在一个变量中：

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

然后就可以在上面使用_renderItem，这样就可以自定义插件生成的列表了：

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

现在你可以在公开活动中做你想做的事了。

这是一个完整的 sn-p：

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">

【讨论】：