Мне нужно реализовать поиск с помощью всплывающего списка объектов.
Как я могу объединить функциональность со списком, используя Vue.js (или, если это невозможно, vue, в любой другой среде javascript) таким образом, что входные данные отправляют запрос фильтра на сервер и данные с серверов, отображаемые в форме используя раскрывающийся список или всплывающее окно с элементами списка.
Я попытался реализовать его с помощью datalist - но у него есть некоторые проблемы, эта форма должна служить для выбора конкретного элемента из базы данных и дальнейшего отображения данных этого элемента в представлении, в примере, элемент станции, который имеет код, параметры имени, а когда я использую список данных, отображается только имя или код. В этом отношении select идеально подходит, это объект javascript, но недостатком является то, что нет текстового поиска с запросом к серверу.
Один из вариантов - создать 2 окна формы, один вход для фильтра, другой выбрать, чтобы выбрать конкретное значение из списка отфильтрованных значений, но эта опция явно безобразна. Подскажите варианты объединения этих вещей вместе или какую-нибудь альтернативную версию для получения выпадающего списка с действием при выборе элемента.
<code><!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="assets/css/app.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<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}}
var station = new Vue ({
el: '#station',
данные: {
sentStation: {code: '', name: ''},
receiveStation: {code: '', name: ''},
станции: [
{код: '400409', название: 'Одесса'},
{код: '403002', название: 'Черноморская ТИС'},
{код: '402103', название: 'Черноморск'},
{code: '418101', имя: 'Zhowtneva'},
{код: '424600', название: 'Черноморская ОПЗ'}
]
}
})
p.s. Я упустил фильтр запросов к серверу, чтобы упростить, с этими моментами уже разбираюсь после отладки формы.
Спасибо за ответы.