Filament•10mo ago

search highlight

Hi, is there any way to add matching text highlights to table search. It's way better for UX. We can see an example of it on this forum search as well.

10 Replies

AnikOP•10mo ago

bump

awcodes•10mo ago

not without a custom integration

AnikOP•10mo ago

we can do it internally. I have made a function to highlight the text.

function highlightMatch($text, $pattern) {
    $highlighted = preg_replace('/(' . preg_quote($pattern, '/') . ')/i', '<span class="highlight">$1</span>', htmlspecialchars($text));
    return $highlighted;
}

function highlightMatch($text, $pattern) {
    $highlighted = preg_replace('/(' . preg_quote($pattern, '/') . ')/i', '<span class="highlight">$1</span>', htmlspecialchars($text));
    return $highlighted;
}

foreach ($users as $user) {
    $user->name = highlightMatch($user->name, 'rup');
    $user->email = highlightMatch($user->email, 'rup');
    $user->contact = highlightMatch($user->contact, 'rup');
    // Do this for any other fields you wish to highlight.
}

foreach ($users as $user) {
    $user->name = highlightMatch($user->name, 'rup');
    $user->email = highlightMatch($user->email, 'rup');
    $user->contact = highlightMatch($user->contact, 'rup');
    // Do this for any other fields you wish to highlight.
}

we have to get the searchable attributes and run them through the highlightMatch function with the search term Kindly review it

awcodes•10mo ago

I’m sure this is fine, but you’ll probably need a custom search input / component to have control over running the results though your function. That’s what I was getting at. I don’t think Filament’s gloabal search has a way to hook into it at that particular point. I could be wrong though.

AnikOP•10mo ago

I was thinking about table search

awcodes•10mo ago

Hmm, table search doesn’t show a preview though. The search is the content of the table. So, highlighting inside of column data is going to be an actual nightmare.

AnikOP•10mo ago

you have to pass the searchable column data into the highlightMatch() function. we already know which columns are searchable, so it shouldn't be an issue to do it natively in Filament I guess

awcodes•10mo ago

So, what’s the question? Lol.

AnikOP•10mo ago

How can the highlightMatch function be implemented with table searchable columns? I can make a PR if you guide me in the right direction

awcodes•10mo ago

I don’t think it’s relevant to core, personally. Showing that doesn’t make sense to me personally in the context of a table. It makes sense in the context of a global search though.

Gaming

Programming

search highlight