Помогите реализовать поиск со всплывающим списком из объектов.
Каким образом можно объединить функционал <input type='text'>
со списком <select>
c использованием Vue (или если невозможно во вью, в любом другом javascript фреймворке) таким образом, чтобы из input
происходил запрос фильтра на сервер, а данные с сервера отображались в виде списка элементов select
как dropdown list
, либо всплывающим окном.
Пробовал реализовать с помощью datalist
- но это не совсем то, данная форма должна служить для выбора конкретного элемента из базы данных, и дальнейшего отображения данных этого элемента во вью, в примере элемент station
, который имеет параметры code, name, а с помощью datalist
возможно отобразить только имя или код. В этом плане select
подходит идеально, выбирается именно JavaScript объект, ну а недостаток в том, что нет текстового поиска с запросом на сервер.
Один из вариантов создать 2 окна формы, один инпут, для фильра, другой select
для выбора конкретного значения из списка отфильтрованных значений, но вариант прямо говоря уродлив.
Подскажите варианты объединить эти вещи воедино, либо вообще альтернативный вариант по типу dropdown list
в поисковике, с действием при выборе элемента.
Пример для понимания:
var station = new Vue({
el: '#station',
data: {
sentStation: {
code: '',
name: ''
},
receiveStation: {
code: '',
name: ''
},
stations: [{
code: '400409',
name: 'Odessa'
}, {
code: '403002',
name: 'Chernomorskaya TIS'
}, {
code: '402103',
name: 'Chernomorsk'
}, {
code: '418101',
name: 'Zhowtneva'
},
{
code: '424600',
name: 'Chernomorskaya OPZ'
}]
}
})
<div id="station" class="form-group">
<div class="col-md-6">
<strong>Send station:</strong>
<select v-model="sentStation" class="form-control">
<option disabled value=''>Station</option>
<option v-for="station in stations" v-bind:value="station">
{{station.name}}
</option>
</select>
<label>({{sentStation.code}}) {{sentStation.name}}</label>
<p></p>
<strong>Receive station:</strong>
<input type="text" list="stationList" v-model="receiveStation.code">
<dataList id="stationList">
<option v-for="station in stations"
v-bind:value="station.code">
{{station.name}}
</option>
</dataList>
<label>({{receiveStation.code}}) {{receiveStation.name}}</label>
<pre>
Sent station: {{sentStation}}
Receive station: {{receiveStation}}
</pre>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
PS запросы фильтра на сервер я упустил для упрощения, с этими моментами уже разберусь когда форму отлажу. Благодарю за ответы.