Доработка кода формы выбора города на js

Рейтинг: 0Ответов: 1Опубликовано: 27.07.2023

Есть модуль на JS он занимается тем, что подсказывает города в форме. Юзер вводит Мос , а скрипт подсказывает "Москва". Но, если юзер вводи "г.Мос" , то "Москва" уже не подкидывает. Как исправить скрипт, что бы если в инпут введено "г.", то он не брал это во внимание и работал только c тем, что после "." Спасибо

$(document).on('keyup', 'input[name="city"]', function() { 
    var imput_city = $(this);
    $.ajax({
        url: 'index.php?route=extension/module/getcity',
        type: 'post',
        data: 'q=' + imput_city.val(),
        success: function(data) {           
            $('.results_cities_container').remove();
            imput_city.after(data)
            
        }
    });
});
$(document).on('click', 'input[name="city"]', function() { 
    var imput_city = $(this);
    $.ajax({
        url: 'index.php?route=extension/module/getcity',
        type: 'post',
        data: 'q=' + imput_city.val(),
        success: function(data) {           
            $('.results_cities_container').remove();
            imput_city.after(data)
            
        }
    });
});


$(document).on('mouseup', '.results_cities_container>.result_list>ul>li', function() {
    $(this).parent().parent().parent().parent().find('input[name="city"]').val($(this).attr('title'));
    $(this).parent().parent().parent().parent().find('input[name="city"]').change();
    $('select[name="zone_id"]').val($(this).attr('zone_id'));
    $('select[name="zone_id"]').change();
    uniCheckoutUpdate();
});

jQuery(function($){
    $(document).mouseup(function (e){ 
        var input = $('input[name="city"]');
        var container = input.parent().find('.results_cities_container>.result_list'); 
        var li = container.find('li');
        if ((!container.is(e.target) && container.has(e.target).length === 0) && (!input.is(e.target) && input.has(e.target).length === 0)) {           
            container.hide(); 
            //uniCheckoutUpdate();
        } else {    
            if (!li.is(e.target) && li.has(e.target).length === 0) {
                $('.results_cities_container>.result_list').hide();
                container.show();
            } else {
                $('.results_cities_container>.result_list').hide();
                
            }
        }
    });
});
javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Использование includes как вариант

Функция для фильтрации городов без учета аббревиатуры 'г.'

const filteredCities = cities.filter((city) =>
  city.toLowerCase().includes(searchText.toLowerCase().trim())
 );

потом filteredCities ставь куда тебе надо

что то вроде этого (потести)

$(document).on('keyup', 'input[name="city"]', function() {
  var input_city = $(this);
  var searchText = input_city.val().trim().toLowerCase(); // 
  Получаем текст из input и приводим к нижнему регистру

  // Массив всех городов
  var cities = ['г.Москва', 'г.Санкт-Петербург', 
  'г.Екатеринбург', 'г.Казань', 'г.Сочи'];

  // Фильтруем города без учета аббревиатуры 'г.'
  var filteredCities = cities.filter(function(city) {
    return city.toLowerCase().indexOf(searchText) !== -1;
  });

 // Создаем HTML-разметку для результатов
 var resultsHTML = '<div class="results_cities_container"><div 
 class="result_list"><ul>';
 filteredCities.forEach(function(city) {
   resultsHTML += '<li title="' + city + '">' + city + '</li>';
  });
  resultsHTML += '</ul></div></div>';

  $('.results_cities_container').remove();
  input_city.after(resultsHTML);
 });

 // Код для обработки клика по результату (ли) и скрытия/показа 
 списка
 $(document).on('mouseup', '.results_cities_container > 
 .result_list > ul > li', function() {
 var selectedCity = $(this).attr('title');
 $('input[name="city"]').val(selectedCity).change();
 

$('select[name="zone_id"]').val($(this).attr('zone_id'))
.change();
  uniCheckoutUpdate();
});

 jQuery(function($) {
   $(document).mouseup(function(e) {
   var input = $('input[name="city"]');
   var container = 
   input.parent().find('.results_cities_container > 
   .result_list');
   var li = container.find('li');

  if (
    (!container.is(e.target) && container.has(e.target).length 
   === 0) &&
   (!input.is(e.target) && input.has(e.target).length === 0)
  ) {
   container.hide();
  } else {
   if (!li.is(e.target) && li.has(e.target).length === 0) {
     $('.results_cities_container > .result_list').hide();
     container.show();
  } else {
    $('.results_cities_container > .result_list').hide();
  }
  }
});
});