Hi,I’d like to work on this improvement. I understand that the goal is to enable type-to-select functionality for the “Country of origin” dropdown in the advanced search for works, similar to what’s already implemented in the authors’ “Nationality” filter (T393278).
I’ll review the existing implementation of that feature and adapt the same JavaScript logic for the “Country of origin” context.
Please let me know if I can go ahead with this task. Thanks

I have gone through the “Nationality” filter implementation (Task: T393278) and noticed that the type-to-select functionality is already available in the codebase.

I will be reusing the existing JavaScript and apply it to the “Country of origin” dropdown in the advanced search for works, so users can easily type to find a country instead of scrolling.

This change should make the advanced search faster and more user-friendly.
Could I please be assigned to the task so I can get started?

Thanks in advance! 😊

Hello, everyone!
@Sandijigs I see you already have another ticket assigned, so I'll go ahead and assign this one to @Oluwatumininu.m
Happy coding!

https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/14

Hi @Pepe_piton @Nat_WDU I have completed the task and made a pull request. Could you help look through?
https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/14

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

1. Found the code responsible for filtering or matching country names in the dropdown.
2. Updated the logic so that countries whose names start with the typed query appear first.
   • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
   • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
3. Ensured the alphabetical order of countries remains consistent.
4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

Before implementation{F66740375}

After implementation

@Nat_WDU @Pepe_piton
https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/90

Completed the task, Kindly review!
Reused the existing javascript functionality of Nationality filter.

PS: The bulk code changes in script of layout.html is only due to indentation as I put the existing script inside a function!

Changes preview attached in the MR

Hi @shreya-bhagat,

The approach looks good, but I'm unable to reproduce the expected behavior on my Ubuntu environment on Firefox and Chrome.
This is how I see the dropdown.

Could it be that there are still missing files to push to the PR?
Which OS and browser environment are you testing this on?

Looking forward to hear from you.
David

Hello @DidiCoronel!
I think just before pushing I made a mistake in the css file. I've fixed that now, have a look: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/90/diffs?diff_id=136659&start_sha=f7156e42826322923b25e9e1091c5a51585ba6e1

Hope it works fine now. I use chrome browser on Ubuntu 24.04.3

so sorry for the inconvenience!

Hello @Pepe_piton , @Nat_WDU,

I have completed the task and created merge request : https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/101
Kindly review.

Thank you

Hello @Pepe_piton , @Nat_WDU Here's the result of my version of the task: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/112

In T405621#11282045, @shreya-bhagat wrote:

Hello @DidiCoronel!
I think just before pushing I made a mistake in the css file. I've fixed that now, have a look: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/90/diffs?diff_id=136659&start_sha=f7156e42826322923b25e9e1091c5a51585ba6e1

Hope it works fine now. I use chrome browser on Ubuntu 24.04.3

so sorry for the inconvenience!

@shreya-bhagat, now I do see the correct styles.

In T405621#11261016, @Oluwatumininu.m wrote:

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

1. Found the code responsible for filtering or matching country names in the dropdown.
2. Updated the logic so that countries whose names start with the typed query appear first.
   • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
   • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
3. Ensured the alphabetical order of countries remains consistent.
4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Oluwatumininu.m, I think this is an improvement for the behavior of the combobox and was able to verify it work as intended. Although I do have a question about the PR, there are two divs with class "combobox-container" added here. Are both actually needed? May have more questions or comments later.

@shreya-bhagat, now I do see the correct styles.

thanks @DidiCoronel for the feedback!

please let me know if any other modifications are required

In T405621#11284544, @DidiCoronel wrote:

In T405621#11261016, @Oluwatumininu.m wrote:

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

1. Found the code responsible for filtering or matching country names in the dropdown.
2. Updated the logic so that countries whose names start with the typed query appear first.
   • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
   • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
3. Ensured the alphabetical order of countries remains consistent.
4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Oluwatumininu.m, I think this is an improvement for the behavior of the combobox and was able to verify it work as intended. Although I do have a question about the PR, there are two divs with class "combobox-container" added here. Are both actually needed? May have more questions or comments later.

Thank you very much for the feedback!

This was a duplication issue that I missed.

I have removed the duplicate div and made a commit. I'll be expecting more comments and feedback.

Good evening @Pepe_piton @Nat_WDU @DidiCoronel
i made a merge request related this issue:https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/136
changes made:

• Reused nationality JS.
• Added combobox-container CSS.
• Added submit validation.

Please check my work and share feedback so I can improve.

In T405621#11287742, @Oluwatumininu.m wrote:

In T405621#11284544, @DidiCoronel wrote:

In T405621#11261016, @Oluwatumininu.m wrote:

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

1. Found the code responsible for filtering or matching country names in the dropdown.
2. Updated the logic so that countries whose names start with the typed query appear first.
   • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
   • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
3. Ensured the alphabetical order of countries remains consistent.
4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Oluwatumininu.m, I think this is an improvement for the behavior of the combobox and was able to verify it work as intended. Although I do have a question about the PR, there are two divs with class "combobox-container" added here. Are both actually needed? May have more questions or comments later.

Thank you very much for the feedback!

This was a duplication issue that I missed.

I have removed the duplicate div and made a commit. I'll be expecting more comments and feedback.

Hi @Oluwatumininu.m, I see the <div> is commented out. If it's not actually needed I'd recommend you remove/delete it completely.

In T405621#11283851, @Afanyulionel wrote:

Hello @Pepe_piton , @Nat_WDU Here's the result of my version of the task: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/112

@Afanyulionel, may I ask what linting tool are you using? I see a lot of code style changes which are not related to the task which makes it a but difficult to review. Would it be possible for you to remove all code style changes from your PR?

In T405621#11299190, @DidiCoronel wrote:

In T405621#11287742, @Oluwatumininu.m wrote:

In T405621#11284544, @DidiCoronel wrote:

In T405621#11261016, @Oluwatumininu.m wrote:

I discovered a new issue while solving this issue and I have fixed it. I will include the before and after videos whilst creating a new PR.

The "Country of Origin" dropdown type-to-select feature currently matches countries anywhere in the name (e.g., typing "N" shows Afghanistan before Nigeria).

I have improved this behavior so that the filter prioritizes countries that START with the typed letters.

What I did:

1. Found the code responsible for filtering or matching country names in the dropdown.
2. Updated the logic so that countries whose names start with the typed query appear first.
   • Used toLowerCase().startsWith(query.toLowerCase()) to check for prefix matches.
   • Optionally, I still included other matches (that contain the query later), but listed them after the prefix matches.
3. Ensured the alphabetical order of countries remains consistent.
4. Tested that typing "N" now shows countries like "Namibia", "Nepal", "Nigeria" first.

@Oluwatumininu.m, I think this is an improvement for the behavior of the combobox and was able to verify it work as intended. Although I do have a question about the PR, there are two divs with class "combobox-container" added here. Are both actually needed? May have more questions or comments later.

Thank you very much for the feedback!

This was a duplication issue that I missed.

I have removed the duplicate div and made a commit. I'll be expecting more comments and feedback.

Hi @Oluwatumininu.m, I see the <div> is commented out. If it's not actually needed I'd recommend you remove/delete it completely.

Thank you David, I have taken it out completely.

@shreya-bhagat, @Aradhya05, @Dipanshu1223 code looks ok and I was able to see the new dropdown type-to-search behavior on your PRs.

In T405621#11299384, @DidiCoronel wrote:

@shreya-bhagat, @Aradhya05, @Dipanshu1223 code looks ok and I was able to see the new dropdown type-to-search behavior on your PRs.

Thank you for the feedback! @DidiCoronel