jQuery Mobile - Search Filter placeholder text change

If you are developing Multilanguage (or more dynamical) jQuery Mobile apps, the first thing you figure out is that Search Filter Placeholder on the of the Views is very much static and all you can do with it is to define its text directly in you HTML Code.

That was really bad if you needed to change this text dynamically (translation purposes etc.) but with the jQuery Mobile version 4.0 there is way to access this Property from the code. You are still not able to bind it but it is definitely better then having it static.


All you need to do is following:

//
// Bind your function on ‘pagechange’ document event
$(document).bind('pagechange', function () {
    //Changes the Filter Placeholder text
    changeFilterPlaceholder($('.ui-page-active').attr('id'));
});
//
// Changes the Filter Placeholder Text
changeFilterPlaceholder = function (id) {

    var filterText = "";

    if (id == "Home") {
        filterText = "Home or whatever you want";
    } else if (id == "Settings") {
        filterText = "Settings of whatever you want";
    } 

    $('.ui-input-search > .ui-input-text')
.attr(
'placeholder', filterText); }

In the next Posts I will be addressing more typical “Problems” developing
jQuery Mobile apps like Optimizing Performance on iPhone 4 or less,
Translating the jQuery Mobile apps etc. so stay tuned!


Posted Jan 23 2013, 11:28 AM by Armin Kalajdzija

Comments

Foll wrote re: jQuery Mobile - Search Filter placeholder text change
on 09-01-2014 12:19

I don't know if it's just me or if everyone else encountering problems with your blog.

It appears as if some of the text in your content are running off the screen. Can someone else

please provide feedback and let me know if this is happening to them

as well? This might be a problem with my browser because I've had this happen before.

Cheers

developers.de is a .Net Community Blog powered by daenet GmbH.