Projet

Général

Profil

Actions

Anomalie #1639

fermé

Autocomplete on member form

Ajouté par Johan Cwiklinski il y a presque 2 ans. Mis à jour il y a 10 mois.

Statut:
Fermé
Priorité:
Normal
Assigné à:
-
Catégorie:
-
Version cible:
-
Début:
24/06/2022
Echéance:
% réalisé:

100%

Temps estimé:
Version utilisée:

Description

On thing has been missed when removing old JS libs: the autocomplete feature on member forms (fields town, birth place and country).

I guess this should be replaced with Fomantic's "search", but I can't get it working :/

I've added "search" in semantic.json file and rebuild the theme, and I've tried something like this:

$('#ville_adh, #lieu_naissance').search({
    apiSettings: {
        url: '{{ path_for("suggestTown" }}',
        method: 'post',
    },
    minCharacters : 2
});

I was expecting at least an error, but nothing happens.

@Guillaume AGNIERAY do you have any idea?

Mis à jour par Johan Cwiklinski il y a presque 2 ans

  • Description mis à jour (diff)

Mis à jour par Johan Cwiklinski il y a presque 2 ans

  • Sujet changé de Autocomplete on memebr form à Autocomplete on member form

Mis à jour par Guillaume AGNIERAY il y a presque 2 ans

Unless you'd like to emphasize the information about each city displayed in the results, I don't think the search component is the best candidate for that purpose.
It allows more display options than required.
The standard search dropdown would be a better drop-in alternative and wouldn't require to load a new fomantic component.

But the more the better ! :D

With both components, the reason why it can't work "out of the box" is that the JSON response doesn't fit the component's fields :
https://bugs.galette.eu/projects/galette/repository/62/revisions/cff420bdb0349147224cbb326bdb31e45a2f4a7b/diff/galette/includes/routes/ajax.routes.php
https://bugs.galette.eu/projects/galette/repository/62/revisions/master/entry/galette/includes/routes/ajax.routes.php#L142
https://fomantic-ui.com/modules/search.html#search
https://fomantic-ui.com/modules/dropdown.html#remote-settings

Mis à jour par Guillaume AGNIERAY il y a presque 2 ans

Johan Cwiklinski a écrit :

I was expecting at least an error, but nothing happens.

You should eventualy enable the debug option in the component settings, and/or raise an alert with the onError() callback.

Mis à jour par Johan Cwiklinski il y a presque 2 ans

Guillaume Agniéray a écrit (#note-3):

Unless you'd like to emphasize the information about each city displayed in the results, I don't think the search component is the best candidate for that purpose.
It allows more display options than required.
The standard search dropdown would be a better drop-in alternative and wouldn't require to load a new fomantic component.

It's okay for me to use dropdown, I just found "search" from a quick web search :)

With both components, the reason why it can't work "out of the box" is that the JSON response doesn't fit the component's fields :

I had in mind keys would have to be changed, but the ajax call is not done at all right now. I'll take another look and give dropdown a try.

Thanks!

Mis à jour par Guillaume AGNIERAY il y a presque 2 ans

Sorry, I didn't pay attention at first that these fields were not selects.
It makes sense then to try to use the search component as a drop-in replacement.
I'll have a look at it too ;)

Mis à jour par Johan Cwiklinski il y a presque 2 ans

I've tried several solution, and add the debug instruction, but nothing still happen :/ I don't understand what the problem is (all files seems properly loaded, there is no error in the js console).

Mis à jour par Guillaume AGNIERAY il y a presque 2 ans

So, you're right. It's documented for the search component, and apiSettings should work (as on any other component) but it doesn't :/

I managed to get responses using api().

The following code intentionnaly fails :

$('#ville_adh, #lieu_naissance').search({
    minCharacters : 2,
    debug: true,
    verbose: true
});
$('#ville_adh, #lieu_naissance').api({
    url: '{{ path_for('suggestTown') }}',
    method: 'post',
    /*data: {
        term: ''
    },*/
    onSuccess: function(response, element, xhr) {
      console.log(response);
    },
    onFailure: function(response, element, xhr) {
      console.log(response);
    }
});

To succeed, the request must post term.

Uncommenting the data setting sends back the full list of towns (as the search input is never transmitted).
But the list of results still doesn't display.
There might be something wrong with the html markup display too.
And I don't see how to transmit the string on input change this way.

So I tried to change the route to /suggest/towns/{term} in ajax.routes.php, and setting the api url to path_for('suggestTown', {'term': '{value}'})
But then the request fails with an "Undefined index: term" slim application error... :/

We should not be far from a solution...

N.B. Depending on how much different city names can be stored in a database, it could also be possible to use the full list of towns using the source behaviour setting of the component and make a local search on this object. But I wouldn't consider that as a solution ;p

Mis à jour par Johan Cwiklinski il y a presque 2 ans

I made some tests again, I've commited the actual result on Github's PR. So far, the search is working well, resulats are returned - I guess - with correct fields. But nothing shows up on the search component :/

Mis à jour par Guillaume AGNIERAY il y a presque 2 ans

There's nothing new on PR#176.
The last change is still commit:ae02d47 that disables the search component.

Mis à jour par Johan Cwiklinski il y a presque 2 ans

Guillaume Agniéray a écrit (#note-10):

There's nothing new on PR#176.
The last change is still commit:ae02d47 that disables the search component.

I indeed forgot to push... sorry :D

Mis à jour par Johan Cwiklinski il y a presque 2 ans

  • Statut changé de Nouveau à Résolu
  • % réalisé changé de 0 à 100

Mis à jour par Johan Cwiklinski il y a presque 2 ans

  • Statut changé de Résolu à Fermé

Mis à jour par Johan Cwiklinski il y a 10 mois

  • Version cible 1.0.0 supprimé
Actions

Formats disponibles : Atom PDF