Question

我试图做自动完成输入框。 Datalist行来自JSON。我希望该用户在进行选择时看到城市的名称（下面是data [i] .stationName），但我希望在选择城市时将数据[i] .stationShortCode作为返回属性而不是名称。

如果没有用户需要查看该短代码，是否可以这样做？我试图把它们放在阵列中，但是我没有弄清楚这对我有什么帮助或者......

我的js如下：

$(document).ready(function(){
var url="https://rata.digitraffic.fi/api/v1/metadata/stations";
var stations=[];
var elem;

$.getJSON(url,function(data,status){
    if(status=="success"){
        $.each(data, function(i, item){

            if(data[i].passengerTraffic!=false){
                elem=$("<option value="+data[i].stationName+ ">");
                elem.appendTo('#stations');
                //stations[i]={value: data[i].stationName, data:data[i].stationShortCode};

            } 
            else{

            }

        })

    }
    else{
        console.log("Something went wrong");
    }
})

}）;

和html：

<div class="stationSearch">
<input type="text" list="stations" id="station" placeholder="Valitse Asema"/>
<datalist id="stations"></datalist>
    <button class="pick">Paina</button>

Answer 1

是的，修改您构建* { box-sizing: border-box; } html, body { width: 100%; font-size: 18px; margin: 0; } .outer { display: flex; flex-direction: row; } .outer-left { flex-wrap: wrap-reverse; /* when wrapped, image must sit on top of text */ } .outer-right { flex-wrap: wrap; } .inner { flex: 1 1 300px; /* grow, shrink, basis */ } .inner-img { background: #563D7C; text-align: right; display: flex; justify-content: center; align-items: center; overflow: hidden } .inner-img img { flex-shrink: 0; min-width: 100%; min-height: 100% } /* below only text styling for text divs, not relevant */元素的脚本：

<option>

这将生成if(data[i].passengerTraffic!=false){ elem=$("<option value=" + data[i].stationShortCode + ">" + data[i].stationName + "</option>"); elem.appendTo('#stations'); }个元素，其中“stationShortCode”是选项值，“stationName”是显示的值。

Answer 2

数组的想法没问题，但它最好是一个对象（或Map），以便您可以直接访问：

var stations = {};
// ...

            $("<option>").attr("value", data[i].stationName).appendTo('#stations');
            stations[data[i].stationName] = data[i].stationShortCode;

现在当你在事件处理程序中有输入值时（例如在按钮点击之后），然后从输入值中获取短代码，如下所示：

var selectedShortCode = stations[$("#station").val()];

以下是工作片段：

＆＃13;

var url="https://rata.digitraffic.fi/api/v1/metadata/stations";
var stations = {};

$.getJSON(url, function(data,status) {
    if (status=="success"){
        $.each(data, function(i, item){
            if(item.passengerTraffic){
                $("<option>").attr("value", item.stationName).appendTo('#stations');
                stations[item.stationName] = item.stationShortCode;
            }
        });
    }
    else{
        console.log("Something went wrong");
    }
});

// ...
$("#station").on("input", function () {
    $("#code").text(stations[$(this).val()]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="stations" id="station" placeholder="Valitse Asema"/>
<datalist id="stations">
<option value="shortcode">longcode</option>
</datalist>

Code: <span id="code"></span>

＆＃13;

如何向datalist添加多个值

2 个答案: