Jquery自动完成以JSON格式获取值

Question

下面是我的JSON对象

var data = [{"city":"Oslo","cityCode":"OSL","airport":"Oslo - All airports","airportCode":"OSL","country":"Norway","localName":"Gardermoen","europeFlag":true,"airlines":["SK","WF"],"distance":0.0}]

我正在尝试用JSON数据做自动补全。在输入OSL(cityode)时，我想在下拉列表中显示OSLO(城市)，反之亦然。

我使用了下面的代码，但它返回的值为空值

JQUERY：

$(document).ready(function(){
     var data = [{"city":"Oslo","cityCode":"OSL","airport":"Oslo - All airports","airportCode":"OSL","country":"Norway","localName":"Gardermoen","europeFlag":true,"airlines":["SK","WF"],"distance":0.0}]

    $("#meta-area").autocomplete({
        source:data,
        select: function(e, ui) {
            e.preventDefault() 
            $("#meta_search_ids").val(ui.item.cityCode);

            $(this).val(ui.item.city);
        }
    });

});

HTML：

<input type='text' size='20' id='meta-area' />
<input type='hidden' id='meta_search_ids' value='' />

请帮我提前拿到values.Thanks

Answer 1

我希望这对你有帮助，我只是做了一些基本的实现，我希望这是你正在寻找的那种解决方案…

注意-我没有处理任何异常

​

var data;

$(document).ready(function(){

     data = [{"city":"Oslo","cityCode":"OSL","":"Oslo - All airports","airportCode":"OSL","country":"Norway","localName":"Gardermoen","europeFlag":true,"airlines":["SK","WF"],"disairporttance":0.0},{"city":"Colombo","cityCode":"CMB","":"Oslo - All airports","airportCode":"OSL","country":"Norway","localName":"Gardermoen","europeFlag":true,"airlines":["SK","WF"],"disairporttance":0.0},{"city":"Oruwala","cityCode":"OSS","":"Oslo - All airports","airportCode":"OSL","country":"Norway","localName":"Gardermoen","europeFlag":true,"airlines":["SK","WF"],"disairporttance":0.0}]




});

$('#meta-area').keyup(function(){
$('#meta_search_ids').val('');
var searchText = $(this).val().toLowerCase();
if(searchText == '') return;
var filterData = $.grep(data,function(ele, index){
return ele.cityCode.toLowerCase().indexOf(searchText) != -1;
})

if(filterData[0].city == 'undefined'){
$('#meta_search_ids').val('');
}
else{
$('#meta_search_ids').val(filterData[0].city);
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type='text' Placeholder="Search" size='20' id='meta-area' />
<input type='text'  Placeholder="Suggestion"  id='meta_search_ids' value='' />

​