How to convert function to MooTools?

Question

We have this code that auto submits our form, when users search but we do not want to use it anymore as its dirty, how can we accomplish this in MooTools?

Thank you

<script type="text/javascript">
function autosubmit() {
    setTimeout("document.search_form.submit()", 1000);
}
</script>

<input type='text' class='home_signin_field' id='search' name='user' size='30' onchange="autosubmit()">

We have a autosuggest script that drops down with a list of results when typing in that field, when a result is clicked, it auto inserts text into field, that is the reason for our messy method. The autocomplete script doesn't automatically submit form.

This is our AutoSuggest script:

<script type="text/javascript">
  <!--
    window.addEvent('domready', function(){
      var options = {
        script:"results.php?task=suggest_user&limit=3&",
      varname:"input",
      json:true,
      shownoresults:false,
      maxresults:5,
      multisuggest:false,
      callback: function (obj) {
      }
    };
    var as_json = new bsn.AutoSuggest('search', options);
  }
);
  //-->
</script>

I can simply add onchange="$('search_form').submit(); return false;" to input field, but redirects so quick the full text in field doesn't preserve, so 2 characters are caught after submission (breaking results).

Answer 1

If your <input> is inside a <form> in the html you could use this:

document.id('search').addEvent('change',function(){   
    this.form.submit();
});

If not, you can call the form directly and use .submit() .

If it still doesn't work it might be because your "autosuggest script" does not fire a change event in the input field #search . In that case you could add this in your autosuggest script after the value of the #search input has been set: document.id('search').fireEvent('change'); .

Check this demo if it helps.