add class for listview search-filter

[frequent]

I really like the search-filter feature in lists, but tweaking the search-filter is difficult, because it is entered by JQM, preceding the actual list and I cannot add a class name from the get-go.

Suggestion:

If I have a list and I give it a class name of MYLIST could you add an automatic class to the search field DIV like ui-input-search-MYLIST?

This way it would much easier to CSS/Jquery with the search field, for example if I want to shrink the input field for small screens and expand onselect (like ipad URL field).

Regards,

Frequent

[toddparker]

Good idea. We should add a class here to make it easier to access.

[frequent]

Cool. I've found another listfilter tweak useful:

I wanted to keep the filter visible on long lists and not scroll away when scrolling through the list.

I got it to work by assinging a class of ui-search-filter-destination to the element that should contain the filter (for example a header or subheader-div) and tweaking your JQM plugin like so (JQM beta 2 line 4032):

// check for alternate filter destination if ($( this ).closest('div:jqmData(role="page")').children().hasClass('ui-search-filter-destination') { // grabs destination theme, if not specified, travers up DOM to find next, or take default-theme="a" var $cont = $(this).closest('div:jqmData(role="page")').find('.ui-search-filter-destination'), $destinationTheme = ( $cont.jqmData('theme') ) ? $cont.jqmData('theme') : $cont.parents('*[data-theme]:last').jqmData('theme') || "a", $replace = "ui-bar-" + listview.options.filterTheme; wrapper.jqmData('theme', $destinationTheme).removeClass( $replace ).addClass('ui-bar-'+$destinationTheme); // force listview into different container $cont.prepend( wrapper ); } else { // default wrapper.insertBefore( list ); } Could need some improvements, especially for matching filter-theme to destination-theme, but it's working ok for me right now.

[hermanschutte]

Thanks, this is exactly what I was looking for. Have you submitted a pull request for this enhancement yet?

[frequent]

not yet, but I got it to work with a little hack. I will send you the code snippet beginning of next week, if you like (travelling at the moment). Rgs, Sven

---

From: Herman Schutte <reply@reply.github.com>
To: Sven Franck <svenfranck@yahoo.com>
Sent: Friday, November 4, 2011 10:58 AM
Subject: Re: [jquery-mobile] add class for listview search-filter (#1835)

Thanks, this is exactly what I was looking for. Have you submitted a pull request for this enhancement yet?

---

Reply to this email directly or view it on GitHub:
#1835 (comment)

[hermanschutte]

Thanks, but I used your snippet above as a base for my own hack that's working fine for now.

[arschmitz]

Moving to 1.4

[jaspermdegroot]

The new filterable widget landed which allows to add the input markup including classes yourself. Closing as fixed.