Question

我正在尝试使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>

Answer 1

尝试将dataType：jsonp替换为dataType：json。

Answer 2

自动完成功能会发送唯一的回调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"]);

jQuery Mobile自动完成JSON数据

2 个答案: