ajax - ローカル json を使用した Jquery モバイル オートコンプリートの実装

Question

約 3000 項目のリストがあるため、jquery モバイル オートコンプリート機能を実装しようとしています。

私はこの構造を持つjsonを持っています:

[{"v1":" abcd","v2":"http://www.url.nl","v3":0487,"v4":"street12","v5":"H"},
{"v1":" qq","v2":"http://www.url.nl","v3":0297,"v4":"street14","v5":"A"},
{"v1":" zz","v2":"http://www.url.nl","v3":0117,"v4":"street55","v5":"A"}]

私はこの例を使用しています: http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/autocomplete/autocomplete-remote.html

しかし、これをjsonファイルで動作させることはできません。

    $( 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://gd.geobytes.com/AutoCompleteCity",
                    dataType: "jsonp",
                    crossDomain: true,
                    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");
                });
            }
        });
    });

ajax 呼び出しと json ファイルが関係しているように感じますが、まだ解決策が見つかりません。