JQuery Execute Json Data using KeyPress

Question

i have some problem,

I create searchbox which consuming data from JSON array. This searchbox is working properly if user click the button, but when pressed enter, the function is not working.

Here's the click button syntax

   $("#btnsearch").click(function() {
        $("#divContent").hide("slow");
        $("#posting").html("");
        //show the div section
        $("#divContent").show("slow", function(){
            $("#divPage").hide("slow");       
            //getting value from searchbox
            valobj = $('#search_box').val();
            if(valobj == ""){
                $("#posting").append("Please Insert Keyword to Search!");
            } else {
            //execute data from database.
            $.getJSON("stitle.php", { title : valobj }, function(data,result){
                //show result from database
                if(data.content == ""){
                    $("#posting").append("Sorry, your search result is not found!");
                } else {
                    $.each(data.content, function(index, value) {
                        var li = $("<li><h3></h3><p></p></li>");
                        $("#posting").append(li);
                        $("h3",li).html("<a href='post.php?id="+ value.id +"'>" + value.title + "</a>");
                        $("p",li).text(value.intro_text);           
                    });

                    $(function(){
                        $("div.holder").jPages({
                            containerID : "posting",
                            perPage: 5
                        });
                        $(".holder").show();
                    });
                }   //end if 
            }, 'JSON'); //end show result
          } // show result if keyword is present 
        }); //end show div section
        $("#leftregion").hide();
        $("#rightregion").hide();
    }); //end click function

I want to create this method executed if user press enter key. I have read that, jquery need to use keypressed method.

    $(document).on("keypress", "#search_box", function(e) {
        var valobj = this.value;
        if(e.which == 13){
            $("#divContent").show("slow");
            $("#posting").html("");   
             if(valobj == ""){
                $("#posting").append("Please Insert Keyword to Search!");
            } else {
                //do the same function like code above 
                $.getJSON("stitle.php", { title : valobj }, function(data.......
            }
        }
    });

But the method is not working, any suggestion?

Thank you.

UPDATE

i'm change the code into this

 $("#search_box").keypress(function(e) {
        valobj = $('#search_box').val();
        if(e.which == 13){
            $("#divContent").show("slow",function(){
            $("#posting").html("");   
            if(valobj == ""){
                $("#posting").append("Please Insert Keyword to Search!");
            } else {
                //do the same function like code above 
               $.getJSON("stitle.php", { title : valobj }, function(data,result){

                   $.each(data.content, function(index, value) {
                        var li = $("<li><h3></h3><p></p></li>");
                        $("#posting").append(li);
                        $("h3",li).html("<a href='post.php?id="+ value.id +"'>" + value.title + "</a>");
                        $("p",li).text(value.intro_text);           
                    });

                    $(function(){
                        $("div.holder").jPages({
                            containerID : "posting",
                            perPage: 5
                        });
                        $(".holder").show();
                    });
               }, 'JSON'); //end get JSON function
            }
         }); //end show function
       }
    });

but it's not working. Am i missing something? any suggestion?

thank you.

Answer 1

Your function would look like the below. So within your document ready event you would use .on() to bind the keypress event handler to the search_box:

$(document).ready(function(){

     $(document).on("keypress", "#search_box", function(e) {
        valobj = $('#search_box').val();
        if(e.which == 13){
            $("#divContent").show("slow",function(){
            $("#posting").html("");   
            if(valobj == ""){
                $("#posting").append("Please Insert Keyword to Search!");
            } else {
                //do the same function like code above 
               $.getJSON("stitle.php", { title : valobj }, function(data,result){

                   $.each(data.content, function(index, value) {
                        var li = $("<li><h3></h3><p></p></li>");
                        $("#posting").append(li);
                        $("h3",li).html("<a href='post.php?id="+ value.id +"'>" + value.title + "</a>");
                        $("p",li).text(value.intro_text);           
                    });

                    $(function(){
                        $("div.holder").jPages({
                            containerID : "posting",
                            perPage: 5
                        });
                        $(".holder").show();
                    });
               }, 'JSON'); //end get JSON function
            }
         }); //end show function
       }
    });

})

EDIT: updated answer as per the discussion below.