0

Помогите реализовать поиск со всплывающим списком из объектов. Каким образом можно объединить функционал <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 запросы фильтра на сервер я упустил для упрощения, с этими моментами уже разберусь когда форму отлажу. Благодарю за ответы.

2
  • Вам необходимо сделать кастомный dropdown, который будет состоять из input'a и выпадающего списка. По событию input - отправляйте запрос на сервер. После получения ответа - показывайте dropdown с вариантами
    – Dmytro
    Commented 10 июл. 2019 в 8:11
  • вот с dropdown и есть проблема, реализовал с помощью datalist, но в нем нет возможности привязать option к объекту как это реализовано в secect, только к id объекта или к названию, в примере кода получается что можно выбрать только код станции, а название не высвечивается. Commented 10 июл. 2019 в 9:18

1 ответ 1

2

Немного поломав голову решил вопрос по другому: сделал фильтр в массиве требуемых объектов по тексту, и отфильтрованные значения уже добавил в dropdown list, если в результате поиска находит только один объект из предлагаемого списка происходит автоматическая привязка искомого значения к данному объекту. В принципе можно делать запросы на сервер, фильтровать нужный список и дальше работать с результатом. Но знакомый подсказал, что если список состоит из пару-тысяч значений то лучше его сразу загрузить весь список на страницу, ресурсов съест незначительно, а работать будет надежнее. Результат прилагается.

<!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>Receive station:</strong>
        <input type="text" list="stationList" v-model="stationSearch">
        <dataList id="stationList">
            <option v-for="station in filteredStations"
                    v-bind:value="station.code">
                {{station.name}}
            </option>
        </dataList>
        <label>({{receiveStation.code}}) {{receiveStation.name}}</label>
        <pre>
Receive station: {{receiveStation}}
Station search: {{stationSearch}}
Found stations: {{filteredStations}}
         </pre>
    </div>
</div>


<script type="text/javascript">
    var station = new Vue({
        el: '#station',
        data: {
            sentStation: {code:'', name:''},
            receiveStation: {code:'', name:''},
            stationSearch:'',
            stations: [
                {code: '400409', name: 'Odessa'},
                {code: '403002', name: 'Chernomorskaya TIS'},
                {code: '402103', name: 'Chernomorsk'},
                {code: '418101', name: 'Zhowtneva'},
                {code: '424600', name: 'Chernomorskaya OPZ'}
            ],
            filteredStations:[]
        },
        watch:{
            stationSearch: function(val){
                if(val.length < 3 ) return;

                var filterArray = this.stations.filter(station => checkStation(val,station));
                if(filterArray.length == 1){
                    this.receiveStation = filterArray[0];
                    this.filteredStations = null;
                    return;
                }
                this.filteredStations = filterArray;
            }
        }
    });

    function checkStation(patt,station){
        var regexp = new RegExp(patt,"i");
        return regexp.test(station.code) || regexp.test(station.name);
    }

</script>

</body>
</html>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.