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

Question

我正在使用jQueryUI自动完成功能与自定义数据和显示,但只是成功地让它部分工作.实际的保存功能很好,但我似乎无法正确使用UX.

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