filterablebeforefilter

var app = {
    timer: null,
    init: function() {
        var instance = this;
        $(document).on("pagecreate", "#home", function() {
            $("#autocomplete").on("filterablebeforefilter", 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: "POST",
                        url: "search.php",
                        data: {
                            searchfor: $input.val()
                        }
                    }).done(function(data) {
                        data = $.parseJSON(data);
                        instance.renderUL(data, $ul);
                    });
                }
            });
        });

        $(document).on("pagebeforechange", function(e, data) {
            // We only want to handle changePage() calls where the caller is
            // asking us to load a page by URL
            if (typeof data.toPage === "string") {
                // We are being asked to load a page by URL
                var u = $.mobile.path.parseUrl(data.toPage),
                    _re = "#contact";
                if (u.hash.search(_re) !== -1) {
                    var name = 'id';
                    var results = new RegExp('[\\?&]id=([^&#]*)').exec(data.toPage);
                    var id = results !== null ? results[1] || '' : '';
                    $.ajax({
                        type: "POST",
                        url: "detail.php?id=" + id
                    }).done(function(data) {
                        data = $.parseJSON(data);
                        instance.detailPage(data);
                    });
                    e.preventDefault();
                }
            }
        });
    },
    search: function(searchFor) {
        var instance = this;
        $.mobile.loading('show');
        console.log(instance);

    },
    renderUL: function(result, $ul) {
        var tmpl = [],
            len = result.contacts.length;
        if (len > 0) {
            for (var i = 0; i < len; i++) {
                tmpl.push('<li><a href="#contact?id=' + result.contacts[i].id + '">' + result.contacts[i].name + '</a></li>');
            }

            $ul.html(tmpl.join(''));
            $ul.listview("refresh");
            $ul.trigger("updatelayout");
        } else {
            $ul.html('<li>Sorry no results matching your query</li>');
        }
        $.mobile.loading('hide');
    },
    detailPage: function(data) {
        var tmpl = [];
        tmpl.push('<div data-role="page" id="detail_page">');
        tmpl.push('<div data-role="header"><h1>Contact Details</h1><a href="#" data-rel="back" data-role="button">back</a></div>');
        tmpl.push('<div data-role="content">');
        tmpl.push('<div>' + data.contact[0].address + '</div>');
        tmpl.push('<div>' + data.contact[0].city + '</div>');
        tmpl.push('<div>' + data.contact[0].email + '</div>');
        tmpl.push('<div></div>');
        tmpl.push('<div><b>' + data.contact[0].company + '</b></div></p> </div>');
        tmpl.push('</div></div>');
        $.mobile.pageContainer.find('#detail_page').remove();
        $.mobile.pageContainer.append($(tmpl.join('')));
        $.mobile.navigate("#detail_page");
    }
};