rails3-jquery-autocomplete：如何扩展选择功能？

Question

我将 rails3-jquery-autocomplete 1.0.9 与 Rails 3.2.8 一起使用。

我正在尝试用自动完成替换组合框 (<select>)。像组合框一样，如果用户选择了一个值，我想更新数据库中的一个 id。也像组合框一样，应该不能选择无效值。

这方面的一个方面是，如果用户开始在字段中输入，但没有从选择列表中选择值就离开了字段，则字段本身以及相应的隐藏 #to_contact_id 字段应该被清空。

以下是字段定义：

<%= autocomplete_field_tag "to_contact_name", '',
      autocomplete_contact_display_name_messages_path,
      :id_element => "#to_contact_id",
      :value => to_contact_name %>
<%= f.hidden_field :to_contact_id, :id => "to_contact_id" %>

我的计划是在用户从选择列表中选择一个项目时设置一个标志，然后检查模糊标志（失去焦点）。我找到了一个覆盖自动完成函数 here 的示例，并编写了这个 Javascript：

var picklist_value_selected = false;

$('input[data-autocomplete]').focus(function() {
  // add autocomplete event handler on focus
  $(this).autocomplete({
    select: function(event, ui) {
      picklist_value_selected = true;
    }
  });
});

$('input[data-autocomplete]').blur(function() {
  // If user leaves field without selecting value, clear values.
  if (!picklist_value_selected) {
    $(this).val('')
    $('#to_contact_id').val('');
  };
});

问题是，当我如上所述覆盖 select 时，“默认”功能不会执行，这意味着 #to_contact_id 一开始就不会被填写。

我假设我需要扩展 select 而不是覆盖它，所以我的代码和 rails3-jquery-autocomplete 基本代码都执行了吗？我怎么做？像下面这样的各种尝试要么不会被调用，要么会抱怨未定义的方法：

$.extend($(this).autocomplete, {
  select: function(event, ui) {
    picklist_value_selected = true;
  }
});

Answer 1

最好的方法是使用自动完成的change event。它在字段模糊时触发，如果值已更改，并且让您知道选择了哪个项目（如果有）。你可以像这样绑定它：

$('input[data-autocomplete]').bind('autocompletechange', function(event, ui) {
    if(!ui.item) {
        // clear the fields
    }
});

更新：

由于我今天与它斗争了这么久，我仍然想知道如何扩展一个函数。

看here。这是初始化自动完成的地方。 select 是一个匿名函数，作为自动完成的选项传递。你可以像这样扩展它（希望代码是不言自明的）：

var originalSelect = $('input[data-autocomplete]').autocomplete('option', 'select');
$('input[data-autocomplete]').autocomplete('option', 'select', function(event, ui) {
    originalSelect.call(this, event, ui);
    doSomeOtherStuff();
});

然而这不是一个好的代码，因为select 是一个事件，所以如果你想在它被调用时做更多的事情，你可以绑定另一个函数到它。这样，原始函数和您的函数都将被调用，而无需像我之前的示例中那样进行黑客攻击：

$('input[data-autocomplete]').bind('autocompleteselect', function(event, ui) {
    doSomeOtherStuff();
});