Firing a function on textbox value change instead of keyup event

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
  });
  }
});

your event is firing for `keyup`, you may use `focus` or `blur` — thecodeparadox, Jul 06 '11 at 17:25

score 1 · Answer 1 · answered Jul 06 '11 at 17:40

As far as I know, the change, blur, and focus events only occur when you take focus away from the textbox. Then they only check to see if the previous value was the same as the original.

So if the previous value was "" and you type "asdf", and click away from the text box to lose focus your function would fire. So now the value is "asdf". If you type "asdfeee", then erase the "eee" and take focus away the event won't fire, because the value will still equal "asdf".

I think the easiest solution here would be to leave the keyup event handler and simply add a click event handler that does the exact same thing to account for the WebKit behavior.

I've added a click event to the search field but it was firing off searches every time the field was clicked. I've added an if statement to only fire off searches when the field is cleared, which is what happens when you click on the webkit "x". Also found this [example](http://stackoverflow.com/questions/2977023/how-do-you-detect-the-clearing-of-a-search-html5-input) Look at my edit in the original question for the edited code. — shyvy88, Jul 06 '11 at 18:13

score 0 · Answer 2 · answered Jul 06 '11 at 17:27

0

$('#search').blur(function(e) {  // you may use `focus`
    search = $(this).val();
    if (search != null || search != '') {
        $.ajax({
            url: '/lists.xml?search=' + search,
            dataType: "xml",
            success: parseXML
        });
    }
});

answered Jul 06 '11 at 17:27

thecodeparadox

86,271
21
138
164

@shyvy88 if it not work please comment and I will try further. – thecodeparadox Jul 06 '11 at 17:28

score 0 · Accepted Answer · edited May 23 '17 at 10:34

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.

Firing a function on textbox value change instead of keyup event

3 Answers3