Event change is only triggered when changing tab or changing window

Asked

Viewed 930 times

1

Good afternoon, everyone.

I am trying to implement an autocomplete using typeahead.js. Assigns a change event to my input to make an ajax request that brings me the data that will be displayed in the list.

However, when the screen is loaded and I type something my event is not triggered. If I take the focus of the component and type again the event is also not fired. It is triggered only when I click on the address bar, or switch tab in the browser or window. After the event is triggered for the first time, every time I type something the event is triggered normally. Any idea why this might be happening?

<!DOCTYPE html>
<html>
<head>
   <script type='text/javascript'>
       $(function(){
          $("#nome").change(function(){
             var input = $(this).val()
             $.ajax({
               url: "loadNameChoices",
               type: "get",
               data:{input:input},
               contentType: 'application/json',
               success: function(response) {
                  $("#nome").typeahead({source:response});
               },
            });
         });
       });
   </script>
</head>

<body>
   <div class="container-fluid">
      <div class="panel panel-primary">
         <g:form name="formBusca" class="form-inline">
            <div class="panel-body">
               <div class="form-group">
                  <label>Nome:</label>
                  <g:textField id="nome" name="nome" class="form-control" autocomplete="off"/>
               </div>
               <div class="form-group">
                  <label>Usuário:</label>
                  <g:textField  id="username" name="username" class="form-control" autocomplete="off"/>
               </div>
            </div>
            <div class="panel-footer">
               <div class="text-right">
                  <button type="button" class="btn btn-default btn-sm" id="search-button">Pesquisar</button>
                  <g:link action="form" class="btn btn-default btn-sm">Novo</g:link>
               </div>
            </div>
         </g:form>
      </div>
   </div>
</body>
</html>

The Backend of the application is being ripped with Grails, but I do not believe that this has any relation.

Thank you.

javascript jquery ajax self-cmplete javascript-events

1 answer

3


The event change in a input, can sometimes cause this kind of problem. Look at this example:

$('input').change(function(){
	$('span').text(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<span></span>

See that the text on span does not appear when typed and yes in a blur, so the fact that it is triggered when changing the tab or window. If you want to change this you can use several other events, such as input:

$('input').on('input', function(){
	$('span').text(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<span></span>

Other events: keyup, keydown and keypress.

In your case would be assism:

$(function() {
  $("#nome").on('input', function() {
    var input = $(this).val()
    $.ajax({
      url: "loadNameChoices",
      type: "get",
      data: {
        input: input
      },
      contentType: 'application/json',
      success: function(response) {
        $("#nome").typeahead({
          source: response
        });
      },
    });
  });
});

  • Great answer. Thank you!!

Browser other questions tagged javascript jquery ajax self-cmplete javascript-events

You are not signed in. Login or sign up in order to post.