CODEWITHSUNDEEP
jqueryjquery-mobilejquery-plugins
XzAngular
XzAngular

Reputation: 199

how to get the clear event of search box in jquery-mobile

Define a search box If the input box have some text , the input box will display a clear button, how to get click event of Clear button?

<label for="search-mini">Search Input:</label>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />

Upvotes: 2

Views: 6996

Answers (4)

Evan Siroky
Evan Siroky

Reputation: 9408

Improving a little bit on Omar's answer, you can get more specific with the selector so that the event doesn't listen to every single element with the ui-input-clear class.

Demo

HTML:

<div id="search-container">
    <label for="search-mini">Search Input:</label>
    <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>

JS:

$(document).on('click', '#search-container .ui-input-clear', function () {
  alert('text cleared');
});

Upvotes: 1

Omar
Omar

Reputation: 31732

Input with type=search are enhanced with clear <a> anchor button which has class ui-input-clear. You can attach events to that button as follows.

Demo

$(document).on('click', '.ui-input-clear', function () {
  alert('text cleared');
});

Upvotes: 4

Dom
Dom

Reputation: 40459

Use .click() and .val():

JAVASCRIPT:

$(function(){
    $('#clear').click(function(){
        $('#search').val('');
    });
});

HTML:

<input type="text" id="search" />
<button id="clear">Clear</button>

DEMO: http://jsfiddle.net/dirtyd77/KPZMQ/

Upvotes: 0

wdews
wdews

Reputation: 352

Just use the .click() listener that's included with jQuery. Example:

$('#clear-button').click(function(){
    $('#search-box').val('');
    // OR WHATEVER OTHER CODE YOU WANT TO RUN WHEN BUTTON IS CLICKED
});

Assuming that the "id" attribute of your button is "clear-button".

Hope this helps.

Upvotes: 1

Related Questions