开发者

jQuery UI AutoComplete remote JSON response

开发者 https://www.devze.com 2023-02-02 05:54 出处:网络
I was using geonames.org to autocomplete city and state but found it to be far too slow to be reliable. My code is as follows, and does work (wait about 10 seconds to see the autocomplete results)

I was using geonames.org to autocomplete city and state but found it to be far too slow to be reliable. My code is as follows, and does work (wait about 10 seconds to see the autocomplete results)

Old (working) code here: http://jsbin.com/umewo3/2/edit

  $(function() {
    $( "#sf_city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://ws.geonames.org/searchJSON",
          dataType: "jsonp",
          data: {
            featureClass: "P",
            style: "full",
            maxRows: 10,
            country: 'US',
            name_startsWith: request.term
          },
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                value: item.name + (item.adminName1 ? ", " + item.adminCode1 : "")
              }
            }));
          }
        });
      },
      minLength: 2
    });
  });

Now I am using YQL as they provide a much quicker response. The issue is that I don't seem to understand how to properly map the response. You can see I am sending a well formed request, and getting the response back - but I am somehow not dealing with the response properly.

New (broken) code here: http://jsbin.com/aqoke3/2/edit

$(function() {
    $( "#sf_city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://query.yahooapis.com/v1/public/yql",
          dataTy开发者_如何学运维pe: "json",
          data: {
            q: 'select name,admin1.code from geo.places where text="' + request.term + '*" and country.code="US" limit 10 | sort(field="popRank", descending="true")',
            format: 'json',
            callback: 'cbfunc'
          },
          success: function( data ) {
            response( $.map( data.query.results.place, function( item ) {
              return {
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 2
    });
  });


I found the issue. I am dealing with it properly after all. I managed to remove the P from the jsonp dataType.

All is well: http://jsbin.com/aqoke3/4/edit

0

精彩评论

暂无评论...
验证码 换一张
取 消