Trigger Autocomplete Without Submitting a Form

Trigger autocomplete without submitting a form

Tested with Chrome, IE and Firefox:

<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe>

<form target="remember" method="post" action="/content/blank">
  <fieldset>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" value="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="">
  </fieldset>
  <button type="submit" class="hidden"></button>
</form>

In your Javascript trigger the submit, e.g. ~~$("form").submit();~~ $("#submit_button").click() (updated from comments)

You need to return an empty page at /content/blank for get & post (about:blank didn't work for me but YMMV).

Make browsers remember input fields without submitting (or having at all) a form?

I just tried to change the "button" type, to a "submit", and in this way it seems to work... page is not reloaded, ajax fills the results div and my new terms are remembered...

like:

<form onsubmit='dosearch();return false;'>
    <input type="text" name="searchterms">
    <button type="submit" >Search!</button>
</form>

it seems that if the "submit" is triggered through a "submit" button (even if it return false) the browsers stores input field values...

Chrome autofill without submitting form

You could use an form with an submit button, so chrome can autofill the form and you can make a fallback for browsers with no javascript activated. You can check this when the X-Requested-With header has the value XMLHttpRequest.

You can for example send the json response for the ajax request and a html response for an older browser that doesnt requested the page via XHR.

Example jQuery-Code:

$("#myForm").on("submit",function(e) {
  // Prevent browser from submitting form
  e.preventDefault();

  if(everythingIsFine) {
     // Send form via ajax to the backend
     sendMyForm();
  } else {
    doSomeWarningsForUser();
  }
  
  
}

And your html like this:

<form method="POST" action="/myAction/" id="myForm">
   <input type="text" id="field1">
   <button type="submit">Save</button>
</form>

How to achieve jquery autocomplete without trigger from a character such as @ or #

I think you should use the regular jQueryUI autocomplete plugin (or any other autocomplete plugin you choose), which will normally trigger when anything is typed, and not this derivation which actually calls itself "triggeredAutocomplete". and whose entire purpose is to trigger the autocomplete only on certain characters, so that other text can be entered into the textbox as well without constantly triggering an autocomplete query.

https://jqueryui.com/autocomplete/#multiple shows you a demo and code for selecting multiple items using the standard jQueryUI autocomplete.

The widget you're using now is designed for a totally different use case.

jQuery Autocomplete - Prevent submit of anything that is not a value from the autocomplete array?

EDIT: See edit below for final fix.

I tested this in the jsfiddle link you gave. I've never worked with jsfiddle before, but this seem to work just fine.

Your last function looks like this at the moment:

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);
    $('#tags').keyup(function(){
      if($(this).val().length !=0)
        $('.sendButton').attr('disabled', false).fadeIn(500);            
      else
        $('.sendButton').attr('disabled',true).fadeOut(500);
   })
});

I added the following to the if statement inside the "onkeyup" function:

$('#tags').keyup(function(){
  if($(this).val().length !=0)
    if($("#tags").val()=="123 Fairfax Ln")
      $('.sendButton').attr('disabled', false).fadeIn(500);                                                       
    else
      $('.sendButton').attr('disabled',true).fadeOut(500);

    else
      $('.sendButton').attr('disabled',true).fadeOut(500);
    })

That was just to test it though, and it worked. If the input field did not match "123 Fairfax Ln", the "Go" button faded away, or didn't appear at all.

You can substitute my test for a single case by creating an array filled with all the acceptable values, then put that if statement, the one I added, inside a for loop.

It will look something like this:

var arrayOfAcceptableValues = ["Fill with all acceptable values"];

$('#tags').keyup(function(){
  if($(this).val().length !=0)
    for(i=0; i< arrayOfAcceptableValues.length;i++)
    // This will loop through all the values in your array.
      var testCase = arrayOfAcceptableValues[i];

      if($("#tags").val()== testCase)
      // This is the test to see if the value entered by the user is actually one of your predetermined acceptable values.
        $('.sendButton').attr('disabled', false).fadeIn(500);                                                         
      else
        $('.sendButton').attr('disabled',true).fadeOut(500);

    else
      $('.sendButton').attr('disabled',true).fadeOut(500);
    })

Just a final word of advice. I'd suggest you configure the second input so that when the first input is empty, that it would be empty too. At the moment when I clear the first input, the generated value that was automatically populated there does not go away. As a safety precaution, I'd just clear that input automatically when the first one is empty.

Hope that helps!

EDIT: Fixes issue with clicking and one or two other issues.

So I changed your code in a few places, but I'll explain what I did and what these changes fixed.

The new java script code looks like this:

$(document).ready(function() {
  var source = [
            { 
              value: "910091432",
              label: "123 Fairfax Ln"
            },
            { 
              value: "910091433",
              label: "567 The Shire Ln"
            }
             ];

    // I moved this line here so that the button functions properly.
    $('.sendButton').attr('disabled',true);

    $("input#tags").autocomplete({
        source: function(request, response) {
        var results = $.ui.autocomplete.filter(source, request.term);

        response(results.slice(0, 35));
    },
        focus: function( event, ui ) {
        $( "#tags" ).val( ui.item.label );
        return false;
      },
        select:function(event, ui){
          $( "input#propertylink" ).val( ui.item.value ),
          $( "#tags" ).val( ui.item.label );
          return false;
        }

    });

  // -Event Listeners:
  $("#tags").on( "change", function(){}).change();

  $("#tags").on("autocompleteselect", goButtonVisibility);
  $("#tags").keyup("autocomplete",goButtonVisibility);

});

You'll see that I removed the second "$(document).ready..." function you had below your autocomplete. I took the code that was inside the "keyup" function and placed it in a new function "goButtonVisibility". I think the code is exactly the same as it was before.

You also would have noticed these three lines:

$("#tags").on( "change", function(){}).change();

$("#tags").on("autocompleteselect", goButtonVisibility);
$("#tags").keyup("autocomplete",goButtonVisibility);

The first one puts an action listener on the #tags field, and it listens for any changes. The middle line of code fires when a user clicks on the link instead of using the keyboard. This then fixes that issue. The last line is pretty much your "keyup" function.

Issues this code fixed:

Your original issue.
The click issue.
It fixed a bug where the user could select an option, which enables the "Go" button, but the user could then go back an edit the selection without the "Go" button disabling again.
It also fixes a bug where the user can type for instance "a" and hover over the dropdown item. The field would populate with the item being hovered over and the "Go" button would enable. The user could, however, move the cursor away from the drop down menu, with the field going back to only showing their search term (in the example "a"), but the "Go" button will remain enabled.

If there's anything else, bugs or something you want me to explain, let me know!

Trigger Autocomplete Without Submitting a Form