Filament•15mo ago

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([...

Jump to solution

7 Replies

tuto1902•15mo ago

You are referring to this placeholder, right?

tuto1902•15mo ago

I don't thik there's a way to change that placeholder text. At least none that I know of

Patrick Boivin•15mo ago

This is in the translation keys if I remember correctly... I'm not sure there's a way to change it for each resource.

vahnmartyOP•15mo ago

Ohh..

Solution

vahnmarty•15mo ago

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;
    }
    }
}

vahnmartyOP•15mo ago

Result.

DrByte•14mo ago

FYI Filament 3.0.72 added support for setting the placeholder text for the global search: https://github.com/filamentphp/filament/pull/8884/files

GitHub

Add column labels to table global search field by bernhardh · Pull ...

Changes have been thoroughly tested to not break existing functionality. Visual changes are explained in the PR description using a screenshot/recording of before and after. TLDR: This PR adds th...

Gaming

Programming

How to easily change the placeholder text on Search?