Question

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

如果我点击一个空框，则会显示自动完成下拉列表，并填充每个选项。但是，如果我开始输入，则下拉列表不会被过滤，它会完全消失。在这种情况下，选项列表非常小，我们正在使用这种技术来减少拼写错误创建新记录的可能性。例如，一个下拉列表包括2个选项：Potomac Electric Power Co.和Virginia Electric＆amp; 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属性。

jQueryUI自动完成功能并不真正自动完成

1 个答案: