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.

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.