How to make Shipping address search function in checkout?

Question

I want to make a function where users can search for the address from the shipping address list at the checkout page.

• Right now there are many B2B Magento stores globally. So Might they have a huge customer list and might those customers have multiple shipping addresses (Multiple Vendor Stores).
• I wanted to create a function where Logged in customers can easily search the address from the address list.

enter image description here

Answer 1

• Extend shipping.js file

   filterShippingAddress: function(data, event) {
   let searchString = event.target.value;
   var self = this;
   //The Search string should be min 3 charactor
   if(searchString.length >= 3){
   var searchedItems = [];
   //Now filter the address list with search string
   var filteredArray = ko.utils.arrayFilter(addressList(), function(item) {
   var result = self.searchArray(item,searchString);
   if(result){
   searchedItems.push(item.customerAddressId)
   }
   return result;
   });
   // Handle the filtered address-list
   // searchedItems
   }
   },
   searchArray: function(array, filter) {
   const mappedFilter = this.mappedFilter(filter);
   const inlineAddress = array.getAddressInline();
   var array = Object.values(array);
   array.push(inlineAddress);
   var list = array.filter(item => typeof item == "string" || typeof item == "int");
   var result = [];
   mappedFilter.forEach(function (mappedItem) {
   mappedItem = (mappedItem+'').toLowerCase();
   for (var i = 0; i < list.length; i++) {
   if (!mappedItem || list[i].toLowerCase().indexOf(mappedItem) >= 0) {
   result.push(list[i]);
   }
   }
   });
   return (result.length) ? true : false;
   },
   mappedFilter: function (filter) {
   filter = this.normalizePolytonicGreek(filter);
   var filters = [];
   if(filter.toLowerCase().indexOf("Σ") || filter.toLowerCase().indexOf("σ") || filter.toLowerCase().indexOf("ς")){
   let pattern = /[Σ,σ,ς]/g;
   filters.push(filter.replace(pattern, "Σ"));
   filters.push(filter.replace(pattern, "σ"));
   filters.push(filter.replace(pattern, "ς"));
   }else{
   filters.push(filter);
   }
   return filters;
   },
   normalizePolytonicGreek: function (text) {
   text = text.replace(/Ά|Α|ά|ἀ|ἁ|ἂ|ἃ|ἄ|ἅ|ἆ|ἇ|ὰ|ά|ᾀ|ᾁ|ᾂ|ᾃ|ᾄ|ᾅ|ᾆ|ᾇ|ᾰ|ᾱ|ᾲ|ᾳ|ᾴ|ᾶ|ᾷ|Ἀ|Ἁ|Ἂ|Ἃ|Ἄ|Ἅ|Ἆ|Ἇ|ᾈ|ᾉ|ᾊ|ᾋ|ᾌ|ᾍ|ᾎ|ᾏ|Ᾰ|Ᾱ|Ὰ|Ά|ᾼ/g, 'α')
   .replace(/Έ|Ε|έ|ἐ|ἑ|ἒ|ἓ|ἔ|ἕ|ὲ|έ|Ἐ|Ἑ|Ἒ|Ἓ|Ἔ|Ἕ|Ὲ|Έ/g, 'ε')
   .replace(/Ή|Η|ή|ἠ|ἡ|ἢ|ἣ|ἤ|ἥ|ἦ|ἧ|ὴ|ή|ᾐ|ᾑ|ᾒ|ᾓ|ᾔ|ᾕ|ᾖ|ᾗ|ῂ|ῃ|ῄ|ῆ|ῇ|Ἠ|Ἡ|Ἢ|Ἣ|Ἤ|Ἥ|Ἦ|Ἧ|ᾘ|ᾙ|ᾚ|ᾛ|ᾜ|ᾝ|ᾞ|ᾟ|Ὴ|Ή|ῌ/g, 'η')
   .replace(/Ί|Ϊ|Ι|ί|ΐ|ἰ|ἱ|ἲ|ἳ|ἴ|ἵ|ἶ|ἷ|ὶ|ί|ῐ|ῑ|ῒ|ΐ|ῖ|ῗ|Ἰ|Ἱ|Ἲ|Ἳ|Ἴ|Ἵ|Ἶ|Ἷ|Ῐ|Ῑ|Ὶ|Ί/g, 'ι')
   .replace(/Ό|Ο|ό|ὀ|ὁ|ὂ|ὃ|ὄ|ὅ|ὸ|ό|Ὀ|Ὁ|Ὂ|Ὃ|Ὄ|Ὅ|Ὸ|Ό/g, 'ο')
   .replace(/Ύ|Ϋ|Υ|ΰ|ϋ|ύ|ὐ|ὑ|ὒ|ὓ|ὔ|ὕ|ὖ|ὗ|ὺ|ύ|ῠ|ῡ|ῢ|ΰ|ῦ|ῧ|Ὑ|Ὓ|Ὕ|Ὗ|Ῠ|Ῡ|Ὺ|Ύ/g, 'υ')
   .replace(/Ώ|Ω|ώ|ὠ|ὡ|ὢ|ὣ|ὤ|ὥ|ὦ|ὧ|ὼ|ώ|ᾠ|ᾡ|ᾢ|ᾣ|ᾤ|ᾥ|ᾦ|ᾧ|ῲ|ῳ|ῴ|ῶ|ῷ|Ὠ|Ὡ|Ὢ|Ὣ|Ὤ|Ὥ|Ὦ|Ὧ|ᾨ|ᾩ|ᾪ|ᾫ|ᾬ|ᾭ|ᾮ|ᾯ|Ὼ|Ώ|ῼ/g, 'ω')
   .replace(/ῤ|ῥ|Ῥ/g, 'ρ')
   .replace(/Σ|ς/g, 'σ');
   return text;
   }
  

• Here developed the search function for the search in the greek language.