Modify filter horizontal search field django

Question

I'm using filter_horizontal in django admin.

There is a vineyard called Château Monlot. When I try to type Château on the search box, it will appear. But when I type Chateau (without foreign char) on the search box, it doesn't appear.

I want to make it appear when I type both Château and Chateau. How can I do that?

Does this answer your question? [Django filter\_horizontal filtering](https://stackoverflow.com/questions/39834540/django-filter-horizontal-filtering) — Erik Kalkoken, May 19 '22 at 12:41
This is not configurable. The filter is a custom jQuery widget that is client side only. You would have to write your own javascript widget to implement the feature you want. https://github.com/django/django/blob/e89f9571352f42c7752b351ba1e651485e5e7c51/django/contrib/admin/static/admin/js/SelectBox.js#L28 — Håken Lid, May 19 '22 at 13:15
I've seen that post, but it only tells how to modify the available content (in this case is vineyard), nothing related to search box @ErikKalkoken — penk, May 19 '22 at 13:18

Håken Lid · Accepted Answer · 2022-05-20T07:47:19.553

This filter is implemented as a custom javascript widget that is included with django.contrib.admin.

https://github.com/django/django/blob/e89f9571352f42c7752b351ba1e651485e5e7c51/django/contrib/admin/static/admin/js/SelectBox.js

I think you could get what you want by monkeypatching a small change to the SelectBox.filter method. We can use this trick to strip accents and diacritics in all the nodes you search through.

str.normalize('NFD').replace(/[\u0300-\u036f]/g, "");

Source: https://stackoverflow.com/a/37511463/1977847

For example you can add some javascript to a admin template for change form, to override the original search filter.

https://docs.djangoproject.com/en/dev/ref/contrib/admin/#overriding-admin-templates

Something like this might work, extending the builtin admin/change_form.html.

{% extends 'admin/change_form.html' %}    
{% block admin_change_form_document_ready %}
{{ block.super }}
<script>
if (window.SelectBox) {
  window.SelectBox.filter = function(id, text) {
    // lowercase and strip accents off search text
    const tokens = text
      .toLowerCase()
      .normalize('NFD')
      .replace(/[\u0300-\u036f]/g, "")
      .split(/\s+/);
    for (const node of SelectBox.cache[id]) {
      node.displayed = 1;
      // lowercase and strip accents off each node text in the filter list
      const node_text = node.text
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, "");

      for (const token of tokens) {
        if (!node_text.includes(token)) {
          node.displayed = 0;
          break;
        }
      }
    }
    SelectBox.redisplay(id);
  }
}
</script>
{% endblock %}

There are other ways to add custom javascript to the admin site, but this one is very quick and dirty.

Anyway, now I can't search with "Château" .. Is it possible to be able to search with both "Château" and "Chateau"? @HåkenLid — penk, May 20 '22 at 02:44
Sure. Just strip the accents from the search input also. I can update my answer to do that. — Håken Lid, May 20 '22 at 07:44

Modify filter horizontal search field django

1 Answers1