javascript - jQueryオートコンプリート-送信ボタンをクリックしても「変更」としてカウントされません

Question

ええ、これは確かにjQueryUIオートコンプリートについての私の3番目または4番目の質問です。私の最近の悩みは、フォームの「送信」ボタンをクリックしても、jQueryの「変更」としてカウントされないように見えることです。入力ボックスが変更されると、jQueryはjavascriptを実行して、受け入れ可能な入力とその値のリストとの一致を強制します。

jQuery("#Resource").autocomplete({
   source: function( request, response ) {
    var matcher = new RegExp(jQuery.trim(request.term).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), "i" );
    var matches = jQuery.grep(resources, function(value) {
     return matcher.test( value.label || value.value || value );
    });
    response(matches.length ? matches : [{ label: "No Result Found", value: "" }]);
   },
   focus: function(event, ui) {
    jQuery('#Resource').val(ui.item.label);
    return false;
   },          
   select: function(event, ui) {
    jQuery('#Resource').val(ui.item.label);
    jQuery('#EmployeeNumber').val(ui.item.value);
    return false;
   },
   change: function(event,ui) {
    for(var i in resources){
     jQuery('#EmployeeNumber').val("");
     if(resources[i].label.toLowerCase()==jQuery('#Resource').val().toLowerCase()) {
      jQuery('#EmployeeNumber').val(resources[i].value);
      break;
     }
    }
   }

  });

EmployeeNumber（非表示）入力にすでに値がある場合、無効な名前を入力してから入力ボックスをタブまたはクリックすると、この値がクリアされますが、代わりにフォームSubmitボタンをすぐに押すと、変更としてカウントされないようです。 'そしてPOSTデータには前のEmployeeNumber値が含まれています-間違った入力であるべきものを'一種の'正しいものにします！

[送信]をクリックすることも変更であることをjQueryに認識させる方法はありますか、それとも入力がクリックされSubmitたことをjQueryに通知するボタンを取得する方法はありますか？Resource

更新：

結局、私はかなりハッキーな方法と考える方法を使用してこれを回避しました-オートコンプリートボックスの「変更」イベントを放棄し、ユーザーが送信をクリックしたときに手動で一致させました。現在の仕組みでは、ユーザーがオートコンプリートのドロップダウンメニューをクリックして名前を選択すると、EmployeeNumber値にオートコンプリートのjQueryコードが入力されます。ユーザーが名前を入力して送信を押すだけの場合、代わりにforceCheck（）関数によって照合が行われます。もちろん、この関数は、2番目の同一の名前があるかどうかに関係なく、自動的に名と照合されますが、残念ながら、これまでに見た中で最も奇妙な癖のように見えますが、forループの終了後のコードは一致しませんループ内に「return」ステートメントがない場合でも、実行されます。ループが終了した後、送信要求は続行されます...それは非常に奇妙です。

<fieldset class="submit">
    <input id="Submit" name="Submit" type="Submit" class="Submit" value ="Submit" onclick="document.getElementById('Resource').value = jQuery.trim(document.getElementById('Resource').value);forceCheck();"/>
</fieldset>

...


<script type="text/javascript">

    ...

    // Force a resource name check when the user hits the submit button. Necessary because if user changes Resoruce
    // input then hits submit directly (no click or tab off), the jQuery 'change' event (see below) isn't fired
    // until *after* the submit button has begun processing, which is too late.
    function forceCheck() {
        for(var i in resources) {
            document.getElementById("EmployeeNumber").value = "";
            if(resources[i].label.toUpperCase() == document.getElementById("Resource").value.toUpperCase()) {
                document.getElementById("EmployeeNumber").value = resources[i].value;
                return;
            }
        }
    }

    jQuery(function(){
        jQuery("#Resource").autocomplete({
            source: function( request, response ) {
                var matcher = new RegExp(jQuery.trim(request.term).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), "i" );
                var matches = jQuery.grep(resources, function(value) {
                    return matcher.test( value.label || value.value || value );
                });
                response(matches.length ? matches : [{ label: "No Result Found", value: "" }]);
            },
            focus: function(event, ui) {
                jQuery('#Resource').val(ui.item.label);
                return false;
            },          
            select: function(event, ui) {
                jQuery('#Resource').val(ui.item.label);
                jQuery('#EmployeeNumber').val(ui.item.value);
                return false;
            },  
        });
    }); 
</script>

誰かがこれよりも良い方法を知っているなら、私はあなたの答えを大いに感謝します-または私のforceCheck関数の残りが実行されない理由を知っているなら...そうでなければ、私は明日私自身の質問への答えとしてこの投稿を投稿します、できる限り受け入れます（2日後だと思います）。

最終更新：

ええと、24時間以上経ちました（かなり長い時間です）ので、私は自分の解決策を「答え」として投稿しました。あと数日置いておき、それでも他に答えがない場合は受け入れます。

Answer 1

変更ハンドラーが（送信後に）遅延するように呼び出される理由は、オートコンプリートが非同期でコーディングされているためです（多くのsetTimeout（...）を使用）。変更イベントは、ぼかしイベントの150ミリ秒後に呼び出されます。

私の解決策も少しハッキーですが、オートコンプリートコードを送信とは別にしておくことができます。これは、オートコンプリートウィジェットがより同期的な方法で書き直された場合にも簡単に削除できます。

$("#mysubmit").click(function (event) {
//Wait for autocomplete to change value
    setTimeout(function() {
        //Do submit
        ...
    }, 250 ); //Make sure delay is greater than 150 ms, as in autocomplete widget.
    event.preventDefault(); //Don't submit now
});

Answer 2

私はこれが古いことを知っていますが、これは私がこの同じ問題を解決しようとしたときに終わった場所であり、私はユニークな解決策を持っていると思います。「プライベート」機能にアクセスする必要があるため、これは確かに完璧なソリューションではありませんが、（これまでのところ）機能し、はるかにクリーンに見えます。

送信する前に、変更イベントを強制的にトリガーします。

$('#yourAutoCompleteForm').submit(function() {
    $('#yourAutoCompleteInput').data("autocomplete")._change();
    //the rest of your submit
}

送信は、変更コールバックによって設定されたカスタム属性を検証します。彼らはおそらくスコープを共有し、変数を使用することができます...

Answer 3

質問から約1年が経過したことは理解していますが、同じ問題が発生しました。今のところ最後のものを使用しますjqueryui1.8.13。私はこのように問題を解決します：

var acinaction = false;  // autocomlete in edit stage flag
var needsubmit = false;  // submit action asked
jQuery("#Resource").keypress(function(event) {
    // if any key pressed then we set autocomplete in edit stage flag
    if (event.which == '13') {
        event.preventDefault();
    }
    acinaction = true;
}).autocomplete({
   select: function(event, ui) {
        // user choose an item from dropdown menu
        // do validation here if necessary
        ...
        // unset autocomplete in edit stage flag
        acinaction = false;
    },
    change: function(event,ui) {
        if( acinaction ) {
            // user input some characters into input field and move focus away
            // without choosing any items from dropdown menu
            // may be clicking submit button
            // do validation here if necessary
            ...
            acinaction = false;
            if( form_is_valid && needsubmit ) {
                // if submit flag is set then try submit again
                JQuery('#Form').submit();
            }
        }
    }
});
JQuery('#Form').submit(function() {
    // if autocomplete in edit stage then cancel form submition
    if( acinaction ) {
        needsubmit = true;
        return false;
    }
    // autocomplete change event is done here
});

コードは醜いですが、それはアイデアを示すはずです。

Answer 4

I have a method to solve this matter,

first, add this script to yours

$('#your_form:input').change(function(){
   $('#your_form').data('changed',true);
});

and then in your submit clicking validataion scripts, add the script as below,

 if(!$('#your_form').data('changed'))  return false; 

I found it really works though I think it is not the best way.

Sorry, it'a work-around.

Answer 5

どうやら、jquery-ui 1.8.4は問題を修正しているようです（ changelogを参照）。

• 修正：コントロールがフォーカスを失わない限り、コンボボックス/オートコンプリートは値を保存しません

あなたはそれをテストすることができましたか？それは私にはうまくいかないからです。

Answer 6

Tvartomの答えをさらに詳しく説明するために、ページの読み込みコードに入力したものは次のとおりです。

$('form').submit(function(event) {
  var form = $(this);
  if (form.find('.ui-autocomplete-input').length &&
      !form.data('already-submitted')) {
    // delay the submit by 250 ms
    form.data('already-submitted', true);
    setTimeout(function() {
      form.submit();
      form.data('already-submitted', false);
    }, 250);
    event.stopImmediatePropagation();
    return false;
  }
});

これは、オートコンプリート入力があるすべてのフォームに自動的に適用されます。ただし、他のフォーム送信イベントコールバックには注意する必要があります。ただし、falseかどうかを確認form.data('already-submitted')し、falseの場合は何もしないでください。

Answer 7

追加できますか

submit: function(event,ui) {
// same thing as your change:
}

Answer 8

blurの代わりに使用してくださいchange。私の場合はうまくいきました！