StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery autocomplete - clicking submit button does not count as "change"
text
Body
copied!<p>Yeah, this is indeed my third or fourth question about jQuery UI Autocomplete. My latest annoyance is that clicking the 'submit' button in a form does not seem to count as a 'change' for jQuery. When my input box changes, jQuery runs some javascript to force a match against a list of acceptable inputs and their values:</p> <pre><code>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; } } } }); </code></pre> <p>If the EmployeeNumber (hidden) input already has a value, entering an invalid name and then tabbing or clicking off of the input box clears this value, <strong>however</strong> if you instead immediately hit the form <code>Submit</code> button, it does not seem to count as a 'change' and the <code>POST</code> data includes the previous EmployeeNumber value - making what should be an incorrect input 'sort of' correct!</p> <p>Is there either some way I can make the jQuery recognise that clicking 'Submit' is also a change, or else some way I can get the <code>Submit</code> button to notify the jQuery that the <code>Resource</code> input has been clicked off of?</p> <p><strong>UPDATE</strong>:</p> <p>In the end, I got around this by using what I consider a rather hacky method - I abandoned the 'change' event of the auto-complete box and did that matching myself manually when the user clicks submit. The way it work now is that if the user chooses a name by clicking on the auto-complete drop-down menu, the EmployeeNumber value will be filled in by the auto-complete jQuery code. If the user just types a name and hits submit, then the matching is instead done by the forceCheck() function. Of course this function will automatically match against the first name regardless of whether or not there is a second identical name, but unfortunately in what seems like the <strong>weirdest</strong> quirk I've ever seen, any code after the end of that for loop does <em>not</em> get executed, even if there is no 'return' statement in the loop. After the loop finishes the submit request just continues... it's so very odd.</p> <pre><code><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> </code></pre> <p>If anyone knows a better way than this, I would very much appreciate your answer - or if you know why the remainder of my forceCheck function might not run... Otherwise, I will post this post as an answer to my own question tomorrow, and accept it when I can (2 days afterwards, I believe).</p> <p><strong>Final Update</strong>:</p> <p>Well, it's been more than 24 hours (quite a lot more), so I've posted my solution up as an "answer". I'll leave it a few more days then accept it if there's still no other answer.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload