列表Geonames WS结果与jQuery手机（自动完成）

Question

有没有人有关于如何使用JSONP调用Geonames WS与jQuery手机的自动完成功能的一些例子或教程？

目标应该是类似http://jqueryui.com/demos/autocomplete/#remote-jsonp但是，而不是下拉菜单我想要一个格式化列表（可点击）。

我发现那个例子http://www.raymondcamden.com/index.cfm/2012/3/27/Example-of-Autocomplete-in-jQuery-Mobile但是因为它不使用Geonames，所以它对我没有多大用处。

Answer 1

在这里，我用......你必须用自己的代码只添加href标记代码：

 $(document).on("pageinit", "#myPage", function() { 
     $("#autocomplete").on("listviewbeforefilter", function (e, data) { 
      var $ul = $(this), 
       $input = $(data.input), 
       value = $input.val(), 
       html = ""; 
      $ul.html(""); 
      if (value && value.length > 2) { 
       $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>"); 
       $ul.listview("refresh"); 
       $.ajax({ 
        url: "http://ws.geonames.org/searchJSON", 
        dataType: "jsonp", 
        crossDomain: true, 
        data: { 
         featureClass: "P", 
         style: "full", 
         maxRows: 12, 
         lang: "it", 
         name_startsWith: $input.val() 
        } 
       }) 
       .then(function (response) { 
        $.each(response.geonames, function (i, val) { 
         html += "<li>" + val.name + (val.adminName1 ? ", " + val.adminName1 : "") + ", " + val.countryName + "</li>"; 
        }); 
        $ul.html(html); 
        $ul.listview("refresh"); 
        $ul.trigger("updatelayout"); 
       }); 
      } 
     }); 
    });