Change event is only triggered when changing tab or changing window

Question

Change event is only triggered when changing tab or changing window

Navigation

#1 by (3 votes)

1

Good afternoon guys.

I'm trying to implement an autocomplete using typeahead.js. Assign 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 loads and I type something my event is not triggered. If I take the focus off the component and re-enter the event is not triggered either. It is fired only when I click on the address bar, or mute the tab in the browser or window. After the event is triggered for the first time, every time I type something the event is fired 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 application's backend is failing with Grails, but I do not think it has anything to do with it.

Thank you.

javascript jquery ajax autocompletar javascript-eventos

asked by anonymous 20.01.2016 / 17:35

1 answer

How to get the value of an input inside a td in jquery How to put weight mask in input using JavaScript

score 3 · Accepted Answer

The event change in a input , can sometimes cause this type 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><inputtype="text">
<span></span>

Notice that the text in span does not appear when typed but in blur , so the fact of being fired by changing the flap 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><inputtype="text">
<span></span>

Other events: keyup , keydown and keypress .

In your case it would look like:

$(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
        });
      },
    });
  });
});