From 89f7fd3c539f0b4f5d61a7dbd38c37b68e51807d Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 17 Jul 2025 14:45:33 +0200
Subject: [PATCH] refactor: changed drivers select to datalist in active train
 options

---
 src/components/TrainsView/TrainOptions.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 2a9822e..850c615 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -30,17 +30,20 @@
             </div>
 
             <div class="search-box">
-              <select
-                class="search-input"
-                name="active-trains"
-                id="active-trains"
-                v-model="searchedDriver"
-              >
-                <option value="">{{ $t('options.select-driver') }}</option>
+              <datalist id="search-active-driver">
                 <option v-for="driverName in activeDriverNames" :value="driverName">
                   {{ driverName }}
                 </option>
-              </select>
+              </datalist>
+
+              <input
+                class="search-input"
+                list="search-active-driver"
+                name="search-active-driver"
+                id="search-active-driver"
+                :placeholder="$t(`options.search-driver`)"
+                v-model="searchedDriver"
+              />
 
               <button class="btn btn--action search-exit" @click="onInputClear('driver')">
                 <img src="/images/icon-exit.svg" alt="Trains search clear icon" />