0.0.2 form poster

static/v2/js/widgets/w_select_country.js

@@ -17,6 +17,11 @@ function openSelectCountry(el, callback) {
 
     $parent.classList.remove('closed');
 
+    $('body')[0].onclick = function (){
+        if (event.target.closest(".w_select_country.closed") || !event.target.closest(".w_select_country")){
+            closeSelectCountry(el)
+        }
+    }
     if (callback) callback('opened', $parent);
 }
 
@@ -29,14 +34,89 @@ function closeSelectCountry(el, callback) {
     if (callback) callback('closed', $parent);
 }
 
+let search_country_timeout = false;
+
 function searchCountry(el) {
-    let request = new api({
-        url: '',
-        data: '',
-        data_type: 'formData',
-        success: function (data) {
-        }, error: function (data) {
+    resetCountrySelect(el)
+    closeSelectCountry(el)
+    if (!el || el.value.length < 3) return;
+
+    let $parent = el.closest('.w_select_country');
+    let $content_part = $parent.querySelector('.w_select_country_content');
+
+    if (search_country_timeout) {
+        clearTimeout(search_country_timeout);
+        search_country_timeout = false;
+    }
+    search_country_timeout = setTimeout(function () {
+        let url = '/reference_data/search_city/'
+        let data = {
+            'search_str': el.value
         }
-    });
-    request.ajaxRequest()
+        let request = new api({
+            url: url,
+            data: data,
+            data_type: 'json',
+            success: function (data) {
+                if (!data.res_search_list && data.res_search_list !== '') console.log(`request data has not html => ${url}`);
+                $content_part.innerHTML = data.res_search_list;
+                openSelectCountry(el)
+            }, error: function (data) {
+            }
+        });
+        request.ajaxRequest()
+    }, 1000)
+}
+
+function selectCountry(el, callback) {
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    let $input_part = $parent.querySelector('.select_country_header_left_part');
+    let $flag = $input_part.querySelector('.country_flag_img_container');
+    let $country_code = $input_part.querySelector('.country_code');
+    let $input = $input_part.querySelector('input');
+
+    let country_data = {
+        full_name: el.dataset.name,
+        id: el.dataset.id,
+        country_code: el.dataset.country_code,
+        flag: el.dataset.flag,
+    }
+
+    $flag.src = country_data.flag;
+    $country_code.innerHTML = country_data.country_code;
+    $input.value = country_data.full_name;
+
+    $input.dataset.name = country_data.full_name;
+    $input.dataset.id = country_data.id;
+
+    closeSelectCountry(el)
+}
+
+function resetCountrySelect(el, callback) {
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    let $input_part = $parent.querySelector('.select_country_header_left_part');
+    let $flag = $input_part.querySelector('.country_flag_img_container');
+    let $country_code = $input_part.querySelector('.country_code');
+    let $input = $input_part.querySelector('input');
+    let $content_part = $parent.querySelector('.w_select_country_content');
+
+    $flag.removeAttribute('src')
+    $country_code.innerHTML = '';
+    $input.dataset.name = '';
+    $input.dataset.id = '';
+    $content_part.innerHTML = '';
+}
+
+function openCountruSelectIfDataEnter(el, callback) {
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    let $content_part = $parent.querySelector('.w_select_country_content');
+    if (!$content_part) return;
+
+    if ($content_part.innerHTML.includes("div")) openSelectCountry(el)
 }