从rest api自动完成

时间:2016-10-18 07:18:28

标签: jquery json rest

我使用自动完成功能进行自动提示,并且我使用其余的api url作为数据源,但是如果我输入 I <则建议使用所有标签/ strong>所以它应该只显示包含 I 的标签,但它显示所有标签,即使我键入任何关键字,它显示所有标签在这里是我的输入文本

<input type="text" id="name" />
<input type="text" id="value" />

这是我的java脚本和jquery

$(function(){
$("#name").autocomplete({
source:"http://localhost:8080/JsonRestfull/countries",
dataType: "json",
select: function (event, ui) {
$("#name").val(ui.item.label);
$("#value").val(ui.item.value);
return false;
}
 });
});

并且http://localhost:8080/JsonRestfull/countries包含以下数据

[{"label":"IND","value":"India"},{"label":"CHN","value":"China"},{"label":"NEP","value":"Nepal"},{"label":"BHU","value":"Bhutan"}]

2 个答案:

答案 0 :(得分:0)

我猜你需要这样的东西:

  $(function(){
 $.getJSON("http://localhost:8080/JsonRestfull/countries", function(data) {
  $( "#name" ).autocomplete({
     source: data    
       });
    });
});

我希望,这会有所帮助。

答案 1 :(得分:0)

您需要使用ajax调用。

$(function(){
    $("#name").autocomplete({
      source :function( request, response ) {
        $.ajax({
           url: "http://localhost:8080/JsonRestfull/countries",
           dataType: "json",
           data: {
              q: request.term
           },
           success: function( data ) {
               response($.map(data, function(item) {
                     return {
                         label : item.label,
                         value : item.value
                     };
               }));
           }
        });
       },
       select: function (event, ui) {
             $("#name").val(ui.item.label);
             $("#value").val(ui.item.value);
             return false;
       }
   });
});