javascript - Jquery Mobile リストビュー検索

Question

ユーザーが名前を入力すると、名前がボックスにポップアップ表示されるプロジェクトを作成していますが、クリックしてダイアログ ボックスで詳細情報を取得できます。私のコードは機能していますが、ダイアログが完全な情報を正しく表示するには、検索フィールドに少なくとも 4 文字を入力する必要があります。4 文字未満の入力でも追加情報を取得できるようにしてほしい。下記参照 ：）

検索画面

ダイアログ画面

以下は私のスクリプトです。これが誰かにとって意味があることを願っています。:)

$(document).ready(function() {

    $('#search').click(function() {
        $(".artist").remove();  // removes the artist class to clear search
        var artists = "js/data.json"; // places the file link into variable

        $.getJSON( artists, function(data) { //  uses the variable to connect to json file
            console.log(data);  
            $.each( data, function( i, item ) { // loops through the json files to retrieve required info
            // section for artists brief intro 
            $("ul#artist").append( "<li class='artist'><span style='font-size:24px; font-weight:bold;color:red;'>"  + item.name  + 
                "</span><br/>" + item.reknown + 
                "<br/><button class='ui-btn' id='information'><a href='#dialog' data-role='button' id='dialog' data-transition='flip'>More Information</a></button></li>");
            }); // end of each function

            $('#search').first().one('keyup', function(){   
             $.each( data, function( i, item ) {    // loops through the json files to retrieve required info
            // section for artists dialog full profile data
            $("ul#artist2").append( "<li class='artist'><span style='font-size:24px; font-weight:bold;color:red;'>" + item.name + 
                "</span><br/> " + item.reknown + 
                "<br/><img class='profile' src='images/" + item.shortname + "_tn.jpg' />" + 
                "<br/><span style='font-size:18px; color:red; font-weight:bold'>Bio:</span><br> " + item.bio + "</li>"); 

                });  // end of information function
             }); // end of each function  
        }); // end of getJson function 
    });  // end of submit on click function

});  // end document ready function