jQueryUI 自动完成并不是真正的自动完成

Question

我正在使用 jQueryUI 自动完成功能functionality with custom data and display，但只成功使其部分工作。实际的保存功能很好，但我似乎无法获得正确的用户体验。

如果我单击一个空框，则会出现自动完成下拉菜单，其中填充了每个选项。但是，如果我开始输入，下拉列表不会被过滤，它会完全消失。在这种情况下，选项列表非常小，我们正在使用这种技术来减少拼写错误创建新记录的可能性。例如，一个下拉列表包括 2 个选项：Potomac Electric Power Co. 和 Virginia Electric & Power Co. 几乎不需要大规模过滤，但我希望如果有人开始输入“Poto”甚至“poto”，列表将从 2 到 1 选项进行过滤。

这不会发生在我身上。我必须遗漏一些东西，因为他们的示例与我预期的完全一样，但也许我只是看不到它了。

      $provider_name.autocomplete({
        source: data.Utilities,
        minLength: 0,
        focus: function( event, ui ) {
          $provider_name.val( ui.item.Utility.name );
          return false;
        },
        select: function( event, ui ) {
          $provider_name.val( ui.item.Utility.name );
          $provider_id.val( ui.item.Utility.id );
          return false;
        }
      }).data( 'autocomplete' )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
          .data( "item.autocomplete", item )
          .append( '<a>' + item.Utility.name + '</a>' )
          .appendTo( ul );
      };

任何意见将不胜感激。谢谢。

Answer 1

问题在于 autocomplete 小部件希望您的数据按以下方式格式化：

[
    { label: 'Potomac Electric Power Co.', value: '1234' },
    { label: 'Virginia Electric & Power Co.', value: '1234' }
]

（如果您的名称/值相同，则只需提供 value 属性）

您的操作方式与 jQueryUI 演示的操作方式之间的区别在于它们没有使用像您这样的中间对象。您已经告诉小部件如何呈现每个项目，但小部件在您搜索时不知道如何找到每个候选对象。

我将通过使用$.map(...) 函数按摩您的数据来解决此问题。这将允许您将数据转换为对autocomplete 更友好的数组。比如：

var friendly = $.map(data.Utilities, function(el) {
    return { label: el.name, value: el.id };
});

然后更改您的 select 事件处理程序：

select: function( event, ui ) {
    $provider_name.val( ui.item.label );
    $provider_id.val( ui.item.value );
    return false;
}

请注意，您可以在 source 数组的每个对象中提供更多信息。您甚至可以在事件处理程序中访问该数据。只需确保提供 label 和 value 属性即可。