jquery update div as text input is modified

Question

Hi,

So I have this text input in a form, and I want to update a div as the user types text in the text input.

 <p><label for="movie_name">Film: </label> <input type="text" name="movie_name" class="required" onkeydown="changediv2(this.value)" /></p>

 <p><div id="ajax_update"></div></p>

My js method:

function changediv2(str) {
$('#ajax_update').html(geturl('http://url/search/movie?query='+str));
}

If I type in a browser http://url/search/movie?query=someString, I get some html displayed. But when I call it via this ajax call, nothing happens...

My geturl method:

function geturl(addr) {
 var r = $.ajax({
  type: 'GET',
  url: addr,
  async: false
 }).responseText;
 return r;
}

I cannot see what is wrong in there...

Please help me! :)

Answer 1

Your function should be like:

function geturl(addr) {    
 $.ajax({
  type: 'GET',
  url: addr,
  async: false,
  success:function(response) {
   return response;
  };
 });    
}

Answer 2

1. I'd use the "keyup" event, otherwise you are always 1 character behind.
2. Is the page you are requesting via Javascript on the same server? Because that's impossible unless you are using something like "jsonp", which is probably not the case.
3. I'd use a timeout / cleartimout situation so you don't send requests too often.
4. Synchronous requests lock the whole browser until it's finished, not sure if that's what you want / if that will work well together with typing..

Answer 3

Chances are, your function returns before the ajax response is received by the client. I would suggest getting rid of the async option and performing the inject within $.ajax's success callback, e.g.:

function changediv2(addr, str) {
    $.ajax({
      type: 'GET',
      url: addr + str,
      success: function(response) { $('#ajax_update').html(response) }
    });
}