фикс

src/views/RegisterView.vue

@@ -72,18 +72,36 @@
               <i class="bi-geo-alt"></i>
               Город
             </label>
-            <div class="custom-select">
-              <select 
+            <div class="select-wrapper">
+              <input 
+                type="text" 
                 id="city" 
-                v-model="city" 
+                v-model="citySearchQuery" 
+                placeholder="Начните вводить название города..." 
+                @focus="showCityList = true"
+                @input="onCitySearch"
                 required 
+                :disabled="loading" 
+              />
+              <button 
+                type="button"
+                class="clear-btn" 
+                @click="clearCitySelection" 
+                v-if="city"
                 :disabled="loading"
               >
-                <option value="" disabled selected>Выберите город</option>
-                <option v-for="cityItem in cities" :key="cityItem.name" :value="cityItem.name">
-                  {{ cityItem.name }}
-                </option>
-              </select>
+                <i class="bi-x"></i>
+              </button>
+              <div class="dropdown" v-if="showCityList && filteredCities.length > 0">
+                <div 
+                  v-for="cityOption in filteredCities" 
+                  :key="cityOption" 
+                  class="dropdown-option"
+                  @click="selectCity(cityOption)"
+                >
+                  {{ cityOption }}
+                </div>
+              </div>
             </div>
           </div>
 
@@ -164,6 +182,9 @@ const errorMessage = ref('');
 const loading = ref(false);
 const birthdateInput = ref(null);
 const cities = ref([]);
+const citySearchQuery = ref('');
+const showCityList = ref(false);
+const filteredCities = ref([]);
 
 // Функция для открытия календаря при клике на поле
 const openDatePicker = () => {
@@ -268,6 +289,31 @@ const handleRegister = async () => {
     loading.value = false;
   }
 };
+
+const onCitySearch = () => {
+  if (!citySearchQuery.value) {
+    filteredCities.value = [];
+    return;
+  }
+  
+  const query = citySearchQuery.value.toLowerCase();
+  filteredCities.value = cities.value
+    .map(cityItem => cityItem.name) // Получаем только названия городов
+    .filter(cityName => cityName.toLowerCase().includes(query)) // Фильтруем по запросу
+    .slice(0, 10); // Ограничиваем количество результатов
+};
+
+const selectCity = (cityName) => {
+  city.value = cityName;
+  citySearchQuery.value = cityName; // Устанавливаем значение в поле ввода
+  showCityList.value = false; // Скрываем список городов
+};
+
+const clearCitySelection = () => {
+  city.value = '';
+  citySearchQuery.value = '';
+  filteredCities.value = [];
+};
 </script>
 
 <style scoped>
@@ -437,12 +483,12 @@ const handleRegister = async () => {
   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
 }
 
-.custom-select {
+.select-wrapper {
   position: relative;
   width: 100%;
 }
 
-.custom-select select {
+.select-wrapper input {
   width: 100%;
   padding: 0.9rem 1rem;
   background: rgba(255, 255, 255, 0.15);
@@ -450,29 +496,51 @@ const handleRegister = async () => {
   border-radius: 12px;
   color: white;
   font-size: 1rem;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  cursor: pointer;
   transition: all 0.3s ease;
 }
 
-.custom-select:after {
-  content: '▼';
+.clear-btn {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
-  font-size: 0.8rem;
+  background: transparent;
+  border: none;
   color: rgba(255, 255, 255, 0.7);
-  pointer-events: none;
+  cursor: pointer;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.custom-select select:focus {
-  outline: none;
-  background: rgba(255, 255, 255, 0.25);
-  border-color: rgba(255, 255, 255, 0.5);
-  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
+.clear-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 100;
+  margin-top: 0.2rem;
+}
+
+.dropdown-option {
+  padding: 0.8rem 1rem;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.dropdown-option:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .action-button {