jQuery與getJSON自動完成

Question

我有一個名爲names.json的json，我需要做一個自動完成的輸入，在json中尋找'name'值。

我該怎麼做？

我想：

$(function() { 
    var getData = function (request, response) { 
    $.getJSON(
     "/cities.json" + request.term, 
     function (data) { 
      response(data); 
     }); 
    }; 

    var selectItem = function (event, ui) { 
     $("#myInput").val(ui.item.value); 
     return false; 
    } 

    $("#myInput").autocomplete({ 
     source: getData, 
     select: selectItem, 
     minLength: 2, 
     change: function() { 
      $("#myInput").val("").css("display", 2); 
     } 
    }); 
}); 

但是我做錯事在我的代碼。

我從一個外部文件

JSON正是從這個格式的JSON，我需要當我在輸入類型返回「名稱」的值：

[ 
    { 
     "id":25, 
     "name":"locale name test 2", 
     "state_id":6 
    }, 
    { 
     "id":667, 
     "name":"locale name test 3", 
     "state_id":24 
    }, 
    { 
     "id":331, 
     "name":"locale name test 4", 
     "state_id":13 
     }, 
     { 
      "id":776, 
      "name":"locale name test 5", 
      "state_id":26 
     }, 
     { 
      "id":680, 
      "name":"locale name test 6", 
      "state_id":26 
     } 
    ] 

Answer 1

這裏是基於您提供的數據的基本工作自動完成示例。

HTML：

<input type="text" id="suggestion" /> 

的Jquery：

var data = [ 
    { 
     "id":25, 
     "name":"locale name test 2", 
     "state_id":6 
    }, 
    { 
     "id":667, 
     "name":"locale name test 3", 
     "state_id":24 
    }, 
    { 
     "id":331, 
     "name":"locale name test 4", 
     "state_id":13 
     }, 
     { 
      "id":776, 
      "name":"locale name test 5", 
      "state_id":26 
     }, 
     { 
      "id":680, 
      "name":"locale name test 6", 
      "state_id":26 
     } 
    ] 

var data_arr = data.map(function(val){ 
    return val.name; 
}). //get all the val.names on an array to make 
    // it easier when it comes setting autocomplete source 
console.log(data_arr) 

$("#suggestion").autocomplete({ 
    source: data_arr, 
    minLength: 2 
}); 

這裏是jsFiddle

主持此外上面的代碼的工作版本： 如果你有來從數據外部來源，這裏是我該怎麼做

HTML：

<input type="text" id="suggestion" /> 

的Jquery：

// I have hosted the same data you provided on myjson.com 

$.getJSON("https://api.myjson.com/bins/1gkh25", function(data) { 

    var data_arr = data.map(function(val){ 
      return val.name; 
    }) 

    auto(data_arr) 

    }); 

function auto(data_arr){ 

    $("#suggestion").autocomplete({ 
     source: data_arr, 
     minLength: 2 
    }); 
} 

試試jsFiddle