Question

我需要使用对象的弹出列表来实现搜索。我如何使用Vue.js（或者，如果不可能，在任何其他javascript框架中，如果在vue中，如果不可能的话）将功能与列表结合起来，则不同于向服务器输入过滤器请求和表单中显示的来自服务器的数据使用下拉列表或带有列表元素的弹出窗口。

我尝试使用数据列表来实现它-但它存在一些问题，该表格应用于从数据库中选择特定项目，并在视图中进一步显示该项目的数据，例如，车站项目，其中包含代码，名称参数，当我使用数据列表时，仅显示名称或代码。在这方面，select非常合适，选择的是javascript对象，但是缺点是没有文本搜索到服务器。

其中一个选项是创建2个表单窗口，一个用于过滤器的输入，另一个用于从过滤后的值列表中选择特定值的选择，但是该选项显然很难看。告诉我选择这些项目时将这些内容组合在一起的选项，或一些其他版本以获取下拉列表。

<!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}}
         </pre>
    </div>
</div>


<script type="text/javascript">
    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'}
            ]
        }
    })
</script>

</body>
</html>

p.s。为简化起见，我错过了对服务器的过滤器请求，这些时刻在表单调试后已经很清楚了。谢谢您的回答。

使用<input>和<select>元素与Vue的组合使用下拉列表进行搜索

0 个答案: