Place Text within Search Box

eweisbrot

Hello,

I have researched all of the solutions on the forums, but I can't figure out how to have the search bar on my table display text in the field before a user types anything into it. Please see my page here: http://199.119.123.135/surety-bonds/licensed-states/california_surety_bond-mike.htm

Thanks in advance.

tangerine

Use the HTML/CSS placeholder.

eweisbrot

Hi,

I'm not clear on your advice. Do you mean add HTML placeholder code directly into the script, while adding CSS placeholder code into the tables stylesheet? E.g.:

<input type="text" name="fname" placeholder="First name">

...and

::-webkit-input-placeholder {
color: red;}

Any more details are appreciated...as I'm really stuck on this simple issue. Thanks.

eweisbrot

I've tried using the language.searchPlaceholder here http://datatables.net/reference/option/language.searchPlaceholder, but still can't get it to display. Any ideas?

tangerine

Right-click on your searchbox - "Inspect element" - will show you exactly what styles are being applied (I'm using Firefox, other browsers may differ). Putting your own wording into placeholder="" should do the job.

Your search box looks like this from here:

Find the surety bond you need:<input aria-controls="bonds" placeholder="" class="" type="search">

eweisbrot

Thanks for the response Tangerine. I see the empty placeholder="" , but I don't know how to edit this since it's being generated by the table javascript. Do you know what must be added to my table script to fill the placeholder? Please see my table code below:

$(document).ready( function () { $('#bonds').DataTable( { responsive: true, "dom": 'lip>', "oLanguage": { "sSearch": "Find the surety bond you need:"}, }); });

eweisbrot

So I think I found the right placeholder code to add to the table javascript, which is:

$(".dataTables_filter input").attr("placeholder", "enter seach terms here");

However, it doesn't work due to a "Uncaught SyntaxError: Unexpected token (" error. I don't see any missing brackets or semi colons. Any idea where the issue is?

eweisbrot

This was answered here http://datatables.net/forums/discussion/24442/can-t-get-filter-placeholder-to-work#latest