jquery - jQuery Mobile は、ajax と Google book API を使用してリストビューを動的に設定します

Question

2 つのページを持つjQuery Mobile / Phonegapアプリケーションを作成しています。最初のページには検索入力があり、ユーザーは本の名前または著者を追加できます。次に、2 番目のページには、指定された値に一致する数に応じて結果が表示されます。

これまで、検索入力から値を取得し、2 ページ目で値を正常に受け取ることができました。

私のjQueryコードは外部ファイルにあり、jQuery.jsとjQuerMobile.jsの間のindex.htmlファイルに追加されています

     //this is from the first page
    // capture the user input, and change page to search_results.html
    function handlePageChange() {
        if ($('#search-1').val().length > 0) {
            $.mobile.changePage('search_results.html', {
                dataUrl : "search_results.html",
                data : {
                    'input' : $('#search-1').val()
                },
                reloadPage : false,
                changeHash : true
            });
        } else {
            alert('Search input is empty!');
        }
    }



     //Handle the page-change action after user has pressed the button = changePage
        $(document).on('pagebeforeshow', "#index", function() {
            $(document).on('click', "#changePage", handlePageChange);
        });

 //this is from second page     
// get data from search input form index.html 
    function getSearchValue() {
        var parameters = $(this).data("url").split("?")[1];

        parameter = parameters.replace("input=", "");
        alert(parameter);

    }

    //Trigger after page is loaded
    $(document).on('pageshow', "#search_results", getSearchValue);

しかし、私は2つのことにこだわっています。最初に jQueryMobile を見ると、API への ajax 呼び出しを使用するためにどのイベントを使用するか、混乱します。

既存のイベント リスナーへのコールバック関数をもう 1 つだけ使用する必要がありますpageshow。

次に、Google Books API の結果を入力したいのですlistviewが、良い例が見つかりません。

少なくとも、本listviewをサムネイルとタイトルで表示したいと思います。誰かが本のいずれかをクリックすると、その本の詳細を表示する別のページに遷移します。

IDに応じてどうすればそれを行うことができますか。

コードのないコンセプトでも大歓迎です。ありがとうございました