Jquery自动完成以获取JSON中的值

时间:2018-02-08 07:12:57

标签: jquery html autocomplete

以下是我的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='' />

请帮助我获取价值。谢谢提前

1 个答案:

答案 0 :(得分:0)

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

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

&#13;
&#13;
Component
&#13;
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);
}

});
&#13;
&#13;
&#13;