mrmarkfrench / country-select-js

A quick jQuery-based country picker based on https://github.com/Bluefieldscom/intl-tel-input.git
MIT License
282 stars 106 forks source link

Selectbox #9

Open NamPNQ opened 9 years ago

NamPNQ commented 9 years ago

Why we not use selectbox instead of input field

mrmarkfrench commented 9 years ago

It's implemented the way it is because the library it's based off of did it this way. Much of the implementation is a straight translation of that code. There's no specific reason not to use a selctbox.

If you have a better implementation, send a pull request. I'd be happy to look at it.

BrettGregson commented 9 years ago

Fairly simple solution to make it act like a select:

Add a readonly property to the input that you are applying the library to (readonly="readonly")

Add a function to set the $('.country-select .selected-flag') element to the width of the it's parent element (this might change depending on your HTML):

function setupFlags(){
    var targetWidth = $(".country-select").width();
    $('.country-select .selected-flag').css("width", targetWidth);
}

Call the setupFlags() function on document ready and on window.onresize if applicable

mrmarkfrench commented 9 years ago

Thanks, @invalidusernam3, that sounds like a pretty elegant way of making it work like @NamPNQ wants it to. I like that it solves the problem of letting others allow their users to type directly into the field to find what they're looking for, but also makes it simple to change the behavior for a different use case if desired.

Would you like to submit a pull request to make your suggested solution an option built into the library? You could trigger a call to a function like the setUpFlags() you describe there (maybe with a more descriptive name), based on a field in the options object passed to the constructor.

BrettGregson commented 9 years ago

No problem @mrmarkfrench, I'll clean it up a bit and submit a pull request tomorrow after work. I might also do the setting of the country name (from the select) on the input after the user has selected a country (as mentioned in one of the issues)