2013-02-07 73 views
0

我試圖讓jQuery Mobile自動完成功能工作,但它只能用外部數據成功。當我嘗試使用我自己的JSON數據時失敗。jQuery Mobile自動完成JSON數據

通過下面js中的註釋行,它可以很好地處理外部數據,但與我自己的數據無關。

JS:

$(document).on("pageinit", "#mainPage", 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({ 
      type : 'GET', 
    //url: "http://gd.geobytes.com/AutoCompleteCity", 
      url: "data/specs_search.php", 
    dataType: "jsonp", 
      data: { 
       q: $input.val() 
      }   
    }) 
     .then(function (response) { 
      $.each(response, function (i, val) { 
       html += "<li>" + val + "</li>"; 
      }); 
      $ul.html(html); 
      $ul.listview("refresh"); 
      $ul.trigger("updatelayout"); 
     }); 
    } 
}); 

});

specs_search.php JSON輸出:

["Rota, AN, Spain","Rotan, TX, United States","Rothbury, MI, United States","Rothesay, NB, Canada","Rothsay, MN, United States","Rothschild, WI, United States","Rothville, MO, United States","Rothwell, QL, Australia","Rotonda West, FL, United States","Rotorua, BP, New Zealand","Rottenburg, BW, Germany","Rotterdam Junction, NY, United States","Rotterdam, ZH, Netherlands","Barcarrota, EX, Spain","Brothers, OR, United States","Crothersville, IN, United States","Croton Falls, NY, United States","Croton on Hudson, NY, United States","Croton, OH, United States","Crotone, CA, Italy"] 

HTML:

<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p> 
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a specification..." data-filter-theme="b"></ul> 

回答

1

嘗試更換數據類型:JSONP與數據類型:JSON。

0

自動完成發送唯一的回叫ID。你將需要用你的json數據包裝。

jQuery191003769553452730179_1370870891109(["London Mills, IL, United States","London, AR, United States","London, EN, United Kingdom","London, KY, United States","London, OH, United States","London, ON, Canada","London, TX, United States","London, WV, United States","Londonderry, NH, United States","Londonderry, OH, United States","Londonderry, VT, United States","East london, EC, South Africa","New London, CT, United States","New London, IA, United States","New London, MN, United States","New London, MO, United States","New London, NC, United States","New London, NH, United States","New London, OH, United States","New London, PA, United States"]);