1

Rails3.2.8でrails3-jquery-autocomplete1.0.9を使用しています。

<select>コンボボックス（ ）をオートコンプリートに置き換えようとしています。コンボボックスのように、ユーザーが値を選択した場合、データベースのIDを更新したいと思います。また、コンボボックスのように、無効な値を選択することはできません。

これの1つの側面は、ユーザーがフィールドへの入力を開始したが、選択リストから値を選択せず​​にフィールドを離れた場合、フィールド自体と対応する非表示の#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" %>

私の計画は、ユーザーが選択リストからアイテムを選択したときにフラグを設定し、ぼかし（フォーカスが失われた）でフラグを確認することでした。ここでオートコンプリート関数をオーバーライドする例を見つけ、この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;
  }
});
4

1 に答える 1

1

これを行う最良の方法は、オートコンプリートの変更イベントを使用することです。フィールドがぼやけている場合、値が変更されている場合にトリガーされ、選択されたアイテム（存在する場合）が通知されます。次のようにバインドできます。

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

アップデート：

今日は長い間戦っていたので、関数を拡張する方法を知りたいと思っています。

ここを見てください。これは、オートコンプリートが初期化される場所です。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();
});
于 2012-10-27T02:53:07.537 に答える