How to easily change the placeholder text on Search?
I want every resource will have different search placeholder, for example in Child Resource, the placeholder should be "Search First Name, Email or Phone Number". In Application Resource "Search Control Number, Status, Name".
Solution
This is was my solution: I created filament.css and filament.js and added it to my AppServiceProvider.
AppServiceProvider.php
Filament::registerScripts([
asset('js/filament.js'),
]);
Filament::registerViteTheme('resources/css/filament.css');Filament::registerScripts([
asset('js/filament.js'),
]);
Filament::registerViteTheme('resources/css/filament.css');filament.css
@import '../../vendor/filament/filament/resources/css/app.css';
.filament-tables-search-input input{
@apply max-w-full;
width: 420px;
}@import '../../vendor/filament/filament/resources/css/app.css';
.filament-tables-search-input input{
@apply max-w-full;
width: 420px;
}filament.js
document.addEventListener('DOMContentLoaded', function () {
if(isUri('admin/applications')){
return changeSearchPlaceholder('First Name, Last Name, Email or Phone');
}
if(isUri('admin/children')){
return changeSearchPlaceholder('First Name, Last Name, School, Email or Phone');
}
if(isUri('admin/users')){
return changeSearchPlaceholder('First Name, Last Name or Email');
}
});
function isUri($uri)
{
var currentURL = window.location.href;
// Define the URI you want to check
var targetURI = $uri;
// Check if the current URL contains the target URI
return currentURL.indexOf(targetURI) !== -1;
}
function changeSearchPlaceholder($placeholder)
{
var searchInput = document.querySelector('.filament-tables-search-input');
// Check if the element exists
if (searchInput) {
// Find the <input> element within the searchInput element
var inputElement = searchInput.querySelector('input');
// Check if the <input> element exists
if (inputElement) {
// Change the placeholder attribute of the <input> element
inputElement.placeholder = $placeholder;
}
}
}document.addEventListener('DOMContentLoaded', function () {
if(isUri('admin/applications')){
return changeSearchPlaceholder('First Name, Last Name, Email or Phone');
}
if(isUri('admin/children')){
return changeSearchPlaceholder('First Name, Last Name, School, Email or Phone');
}
if(isUri('admin/users')){
return changeSearchPlaceholder('First Name, Last Name or Email');
}
});
function isUri($uri)
{
var currentURL = window.location.href;
// Define the URI you want to check
var targetURI = $uri;
// Check if the current URL contains the target URI
return currentURL.indexOf(targetURI) !== -1;
}
function changeSearchPlaceholder($placeholder)
{
var searchInput = document.querySelector('.filament-tables-search-input');
// Check if the element exists
if (searchInput) {
// Find the <input> element within the searchInput element
var inputElement = searchInput.querySelector('input');
// Check if the <input> element exists
if (inputElement) {
// Change the placeholder attribute of the <input> element
inputElement.placeholder = $placeholder;
}
}
}