jQueryUI的自动完成功能并没有真正的自动完成 [英] jQueryUI Autocomplete doesn't really autocomplete

问题描述

我使用的是自定义数据jQueryUI的自动完成功能和显示，但只成功地得到它的部分工作。实际的保存功能是好的，但我似乎无法得到正确的UX

I'm using the jQueryUI autocomplete functionality with custom data and display, but have only succeeded in getting it to work partially. The actual save functionality is fine, but I can't seem to get the UX right.

如果我点击一个空框，自动完成下拉出现与填充每个选项。但是，如果我开始打字，下拉没有被过滤，它只是消失完全。在这种情况下，选项列表是pretty小，我们正在使用这种技术，以减少错别字创造新纪录的潜力。例如，一个下拉菜单包括两个选项：波托马克电力公司和弗吉尼亚州的电气与放大器;电源有限公司几乎没有一个需要大规模的过滤，但是我希望，如果有人开始键入波托甚至波托，名单将被过滤从2到1选项。

If I click on an empty box, the autocomplete dropdown appears with every option populated. If, however, I start typing, the dropdown isn't filtered, it just goes away entirely. In this case, the list of options is pretty small and we're using this technique to reduce the potential for typos creating new records. For example, one dropdown includes 2 options: Potomac Electric Power Co. and Virginia Electric & Power Co. Hardly a need for massive filtering, but I'd expect that if someone started typing "Poto" or even "poto", the list would be filtered from 2 to 1 option.

这不会发生我。我必须失去了一些东西，因为他们为榜样的作品完全一样，我期望，但也许我只是过去看到它的地步。

That doesn't happen for me. I have to be missing something since their example works exactly like I'd expect, but maybe I'm just past the point of seeing it.

      $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 );
      };

任何投入将是非常美联社preciated。谢谢你。

Any input would be much appreciated. Thank you.

推荐答案

的问题是，自动完成部件期待您的数据被格式化的方式如下：

The issue is that the autocomplete widget expects your data to be formatted the following way:

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

的（如果你的名字/值是相同的，你只需要提供的价值属性）的

你这样做的方式和jQueryUI的的演示是做它的方式之间的区别是，他们没有使用一个中间对象像你这样的。你告诉部件如何使每一个项目，但小部件不知道如何找到每个候选当您搜索。

The difference between the way you're doing it and the way jQueryUI's demo is doing it is that they are not using an intermediate object like yours is. You've told the widget how to render each item, but the widget doesn't know how to find each candidate when you search.

我会通过使用 $按摩你的数据解决这个问题。地图（...） 功能。这将允许您将数据转换为更自动完成 - 友好数组。是这样的：

I would fix this by massaging your data using the $.map(...) function. This will allow you to transform your data into a more autocomplete-friendly array. Something like:

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

，然后改变你的选事件处理程序：

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

请注意，您可以在源数组中的每个对象提供更多的信息。你甚至可以访问该事件处理的数据。只要确保供应标签和值属性。

Note that you can provide more information in each object of the source array. You can even access that data in the event handlers. Just make sure to supply the label and value properties.

这篇关于jQueryUI的自动完成功能并没有真正的自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！