More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • jQuery Mobile 1.4 | John Chacko

    This is an extended version of jQuery Mobile 1.4.2 Remote autocomplete.
    http://demos.jquerymobile.com/1.4.3/listview-autocomplete-remote/
    This uses ‘filterablebeforefilter’ event to dynamically populate a listview as a user types a search query. My Demo listens to ‘filterablebeforefilter’ and let you seach for contacts.
    And onclick of a contact in list it request again for contact details and show in a new page.

    This is a typical scenario for several projects.

    Demo of Autocomplete using ‘filterablebeforefilter’

    Below is the code.

    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");
        }
    };