اختيار الدولة عند التسجيل برقم الهاتف في لارافل Laravel

يمكنك برمجة هذه القائمة من خلال وسم select بحيث تقوم بإدخال الدول و مفتاح كل دولة بشكل يدوي إلى قاعدة البيانات و من ثم عرضها في select أو يمكنك استخدام حزمة مثل حزمة 

composer require pragmarx/countries

أو الحزمة التالية 

https://github.com/TappNetwork/nova-select-country-code

مثلما يمكنك إستعمال واحدة من الحزم الجاهزة لذلك , يمكنك بكل حال من الأحوال نمذجة الفكرة و تطبيقها بخصوصية عالية . 

لنقل أن الفكرة تتبع المنطق التالي : 

1. HTML :

• تعريف عنصر قائمة منسدلة select , تحمل كخيارات مجموعة الدول . بحيث يحمل كل خيار خاصية value بقيمة الرقم الدولي المرافق لهاته الدولة . 
• تعريف حقل إدخال نصي .   

   2. JS : 

• يجب إضافة حدث عند الكتابة في حقل الإدخال النصي , ففي حالة مطابقة النص المدخل من طرف المستخدم لقيمة خاصية value لخيار ما في القائمة المنسدلة , يتم تحديده تلقائيا .  

مثال عملي :  

يمكنك بأي حال من الأحوال طباعة قائمة الدول بأي طريقة , و سيتم إختيار تكرار foreach في لارافيل للقيام بذلك . كما أن تنسيق العنصر يتم بخصوصية عالية , و لذلك سنستخدم صفوف بوتستراب كمثال . 

لنقم بتعريف الهيكلية التالية :  

<div class="col-12 d-flex flex-wrap">
        <select id="countryList" class="col-lg-3 form-control">    
            @foreach ($countries as $country)
                <option value="{{ $country->phonecode }}"> 
                    {{ $country->name }}
                </option>
            @endforeach
        </select>

        <input type="text" 
               id="typeNumber" 
               class="form-control col-lg-9" 
               placeholder="قم بإدخال رقم هاتفك مرفقا بالكود الدولي">
</div>

ثم لنقم بإضافة شيفرات الجافاسكربت لتقوم بالوظائف الموصوفة سابقا , و ذلك كالتالي : 

var typeNumber = document.querySelector('#typeNumber'),
    countryList = document.querySelector('#countryList');

typeNumber.addEventListener('keypress' , function(){
    var countryCode = this.value;

    if(!! document.querySelector('option[value="' + countryCode + '"]')) {
         countryList.value = countryCode;
    }
});

أو بسياق الـ jQuery : 

var typeNumber = $('#typeNumber'),
    countryList = $('#countryList');

typeNumber.on('keypress' , function(){
    var countryCode = $(this).val();

    if(!! $('option[value="' + countryCode + '"]')) {
         countryList.val(countryCode);
    }
});

و بشكل عام , سيمكنك تخصيص منطق عملها وفق احتياجك ووفق ما يلائم فكرتك , كأن تقوم بإعادة تشكيل هيكلية الـ HTML لتتضمن صورة مصغرة للعلم الوطني لكل دولة أو تغير طريقة التحديد لكل عنصر أو أية فكرة أخرى قد يحتاجها أي تعديل . 

يمكنك التحصل على قائمة بإسم الدولة مرافقا لها رقمها الدولي من هنا .