Changing the default Click or start typing placeholder text for the fields in the Table Filter macro

[Stan Ry]

Howdy,

The Table Filter macro contains fields that, by default, have the 'Click or start typing' placeholder text inside them.

I would like to replace this default text wtih the names of field label provided that I hide the label names.

Currently I am using the following script

$('input.default:eq(0)').val("Field Placeholder Text");

However, this only works up until I click inside the field. If I remove the focus from the field, the placeholder text reverts back to its default Click or start typing value.

How do I override this and always use the field names as the placeholder for the field value?

The idea is to get rid of labels that prepend the fields and show field names inside the field as a text placeholder.

Thank you.

[Andrey Khaneev _StiltSoft_ · Accepted solution]

Hi Stan,

You need to modify your script a little bit:

$('input.default:eq(0)').attr("placeholder", "Field Placeholder Text");

[Stan Ry]

Hi Andrey,

Thanks again for your valuable and swift responses!

The issue for now is that if I click inside the field and then click outside, the assigned value resets to its default 'Click or start typing' value.

I understand that each field is an input element of the default class:

<input type="text" value="Click or start typing..." class="default"
 autocomplete="off" style="width: 140px;">

So in order to set the placeholder value, I have to set the value attribute just like you've suggested:

$('input.default:eq(0)').attr("value", "Field Placeholder Text");

Each new field can be accessed by its index, so that I have to set the placeholder of the second field, I need the following code:

$('input.default:eq(1)').attr("value", "Second Field Placeholder Text");

However, this setting only persists up until one uses the modified field. Like I said, if you click inside the field and then click outside, the value shown inside the field resets to its default -- 'Click or start typing'.

As I get it, it happens so just because my script only runs a single time, when the page is fully loaded. If I change the field state by clicking inside AFTER the page is loaded, the script doesn't load, and the value resets.

I do it like:

$(document).ready(function () {
 $('input.default:eq(0)').attr("value", "Field Placeholder Text");
 $('input.default:eq(1)').attr("value", "Second Field Placeholder Text");
 });

Obviosly, I have to somehow reapply the change after I click inside the field.

How would I do that?

Thank you.

[Andrey Khaneev _StiltSoft_]

Here is the scripted for dropdown filters I tested:

AJS.toInit(function() {

$('.filter-container select').each(function() { 
    var select = $(this); 
    select.attr('data-placeholder', select.attr('name'));
}).trigger("chosen:updated")

});

[Stan Ry]

@Andrey Khaneev _StiltSoft_,

Thank a bunch! That's magic, works as the doctor ordered.

[Andrey Khaneev _StiltSoft_]

It's a pleasure to help you, Stan!