Question

The following code currently only generates a search query whenever a keyup event happens. This hasn’t been a problem up until I started using webkit and it is now possible to clear the search field without pressing any keys (by clicking the “x” in the search field).

Is it possible to get the same function to fire whenever there is a change in the search box?

I have tried to replace .keyup with .change but that doesn’t seem to produce any response when changes happen in the search box.

$('#search').keyup(function(e){
  e.preventDefault();
  search = $(this).val();
  $.ajax({
    url: '/lists.xml?search='+search,
    dataType: "xml",
    success: parseXML
  });
}); 

Any help will be greatly appreciated!

EDIT: After some further research I’ve found this example.

The following code works in combination with the code above:

$('#search').click(function(e){
  if($(this).val()==""){
  e.preventDefault();
  search = $(this).val();

  $.ajax({
    url: '/lists.xml?search='+search,
    dataType: "xml",
    success: parseXML
  });
  }
});  

Answer 1

After some further research I have come up with a solution to my own problem. In order to account for the webkit functionality I’ve added 2 event handlers as shown below. This isn’t a perfect solution but it will do for now…

$('#search').keyup(function(e){
  e.preventDefault();
  search = $(this).val();
  $.ajax({
    url: '/lists.xml?search='+search,
    dataType: "xml",
    success: parseXML
  });
}); 

$('#search').click(function(e){
  if($(this).val()==""){
  e.preventDefault();
  search = $(this).val();

  $.ajax({
    url: '/lists.xml?search='+search,
    dataType: "xml",
    success: parseXML
  });
  }
});  

This example helped in deriving the solution.