Country search option

[packiyarajpatchath]

Fix #1461 Live searching need add, Able to search with country name and dial code.

[vadivelar]

Is there any plan to merge this PR? we also need a search option for country. @jackocnr

[jackocnr]

You can already search the country names just by opening the dropdown and typing the first couple of letters. I'm reluctant to add a 2nd input into the mix (in addition to the main phone number input) as I think it makes the UX much more complex/confusing. With that said, I will keep an open mind and will happily review this PR when I next have some free time - most likely in December.

[jackocnr]

Adding a screenshot for reference.

Apologies for the delay in reviewing this properly.

Thanks for putting this together. I am actually coming around to the idea, but we will need a lot of changes for this to be merged. Basically, I think it should work the way Stripe do it (you need to register for an account first, then go to edit profile page, and click "Add authentication method" then "Add SMS" to see their phone input):

So the main change is that when you type, it should filter the countries to only show the ones that match what was typed. And obviously we need to make the search input fit the width of the dropdown (and we shouldn't have an input inside a ul element). And I see you've only modified the build files, but you'll need to modify the src files and then run npm run build:js.

We also need to consider how this will work on mobile devices. (Probably just disable the search input on mobile, at least to start with)

UPDATE: thinking about this from a performance perspective, adding and removing hundreds of nodes from the DOM with each keypress in the search box, we need to be as efficient as possible. I think the best way to do this would be to store a reference to each country list item node in the dropdown, so we can add and remove them quickly, without having to regenerate the markup each time. We could tweak the _appendListItems function so that instead of generating the markup string for all of the list items and then appending them all in one go at the end, instead, inside the loop, we use _createEl to create each list item node, and then keep a reference to it in the this.countries array, so we can then filter this.countries depending on what the user searches for, and then we've got direct access to the list item nodes we want to display each time.

Something like this (pseudo-code):

_appendListItems(args) {
    for each country {
        // create list item node and append to countryList
        const itemNode = this._createEl("li", attributes, this.countryList);
        // fill in the content e.g. the flag, country name and dial code, as normal
        itemNode.insertAdjacentHTML(itemContent);
        // store a reference to the node for later use
        this.countries[i].node = itemNode;
    }
}

_filterCountries(query) {
    const resultItems = filter this.countries name property based on provided query string
    // first remove all displayed country items
    for each resultItem {
        // append resultItem.node to the list
    }
}

With this new functionality, we'd probably remove the preferredCountries feature. And obviously we'd also remove the current functionality that allows you to type a country name while the dropdown is focused and it scrolls that country into view.

As per Stripe's implementation, we should search for the query string anywhere in the country name, not just at the beginning. And allow the user to type something in the search box, then use up/down arrows to select a result, without removing focus from the search input, so they can keep typing if they want.

[apangr]

It's good to know that you are working on this functionality, I hope it is available soon, I need it 👍

[csyndicate]

working

[jackocnr]

I've implemented this myself now. See new option countrySearch in v18.5.1. Let me know what you think!