Setting <input> placeholders in search forms

How do I...
#1

Dev inspectors show that out-of-the-box, column search boxes when Sprunjing have “placeholder” attributes, which are not set. It may be the late hour, but I can’t seem to find in code (client-side or server side) where these search box attributes live, and how to set them. I just want some kind of generic search placeholder text like: “type here to search this column.”

Yeah, I’m guessing this is as easy as a js element search/find/assign attribute. I just don’t want to reinvent the wheel if there’s a better way in one of the existing frameworks included with UF.

#2

It sounds like you’re talking about ufTable, which is a wrapper around Mottie’s Tablesorter. The column search fields are handled by the filter widget. It looks like there is a filter_placeholder option, which you could pass in through ufTable. See https://learn.userfrosting.com/client-side-code/components/tables#tablesorter

#3

Yep. That should do it more elegantly than the brute-force method I was considering last evening. It would have taken me hours of drill-down into the docs and frameworks to find this, so thanks much.

#4

Glad I could help :smile:

#5

Hey Alex. As a followup, I opted to use the “data-placeholder” attribute for plugins rather than the uf-table setting global, since it simplifies the use of translate() for localization.

#6

Thanks, I’ve added this to the documentation! https://learn.userfrosting.com/client-side-code/components/tables#optional-attributesclasses