Change Listview Search Field Input Type

I'm wondering how I can change the type of the listview-input field to number. I've tried this: $('#list').find('input:first').attr('type','number'); $('#list').listview('refresh')

Solution 1:

You won't be able to change the type attribute of an input run-time but you can clone the element, change the clone's attributes, and then replace the existing element with the clone. You also weren't selecting anything, because jQuery Mobile adds a form with the filter input as a sibling to the listview widget, not as a descendant.​

//run code when pseudo-pages initialize
$(document).on('pageinit', '.ui-page', function () {

    //find the filter input on this pseudo-pagevar$filterInput = $(this).find('.ui-listview').prev('.ui-listview-filter').find('input'),

        //create a clone of the filter input on this pseudo-page$clone       = $filterInput.clone(true);

    //replace the original input with the clone$filterInput.replaceWith($clone.attr('type', 'number'));
});​

Here is a demo: http://jsfiddle.net/XEEsL/

Here is some sample HTML so you can see the relationship between the listview widget and it's associated filter input:

<form class="ui-listview-filter ui-bar-c" role="search">
    <divclass="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c"><inputplaceholder="Filter items..."data-type="search"class="ui-input-text ui-body-c"type="number"><ahref="#"class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden"title="clear text"data-corners="true"data-shadow="true"data-iconshadow="true"data-wrapperels="span"data-icon="delete"data-iconpos="notext"data-theme="c"data-mini="false"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">clear text</span><spanclass="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a></div></form><uldata-filter="true"data-role="listview"class="ui-listview"><liclass="ui-li ui-li-static ui-body-c">1</li><liclass="ui-li ui-li-static ui-body-c">2</li><liclass="ui-li ui-li-static ui-body-c">3</li></ul>