Jquery Autocomplete与天气地下api一起使用

时间:2015-07-25 08:20:59

标签: jquery-ui jsonp jquery-ui-autocomplete

我正在尝试使用天气地下API自动完成功能。但它没有在HTML字段上给出任何弹出窗口,但它在控制台中显示输出。请查看以下代码和建议。

      $(document).ready(function($){
 $('#input').autocomplete({
   source:function (request, response) {
  $("#input").keyup(function(me){
   var  city=$(this).val();


   $.ajax({

url:"http://autocomplete.wunderground.com/aq?query="+city+"&c=US&cb=call=?",
dataType: "jsonp",
crossDomain: true,
success: function (parsed_json) {
//console.log(JSON.stringify( parsed_json));
  response( $.each(parsed_json.RESULTS,
  function(i,item){

    return JSON.stringify( parsed_json.RESULTS[i].name);

         }));

},

 error:function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
   }

  });


    });
   }
 });

  });

1 个答案:

答案 0 :(得分:2)

经过三天的斗争,我做了它的工作。我正在编写代码,我做了js Fiddle example。希望它可以帮助别人。 如果您有任何其他更好的方法,请建议我 感谢。

$(document).ready(function($){
 var i;
 var out;
var arr=[];

$('#autocomplete').keyup(function(){
var value=$(this).val();           

$.ajax({
url:"http://autocomplete.wunderground.com/aq?&c=IN&cb=call=?",
dataType: "jsonp",
data:{
"query":value
},
crossDomain: true,
success: function (parsed_json) {
var c =$.each(parsed_json.RESULTS,function(i,item){
out=(parsed_json.RESULTS[i].name);
 arr.push(out);

 });
 $( "#autocomplete" ).autocomplete({
 source:arr

});

},
 error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
    }

  }); 
      });


});
html:
<div class="ui-widget">
        <label for="autocomplete">Select a city: </label>
<input id="autocomplete">
      </div>