JQuery Führen Sie Json-Daten mit KeyPress aus - jquery, json, keypress

Ich habe ein Problem,

Ich erstelle ein Suchfeld, das Daten aus einem JSON-Array verbraucht. Dieses Suchfeld funktioniert ordnungsgemäß, wenn der Benutzer auf die Schaltfläche klickt. Wenn Sie jedoch die Eingabetaste drücken, funktioniert die Funktion nicht.

Hier ist die 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

Ich möchte diese Methode erstellen, wenn der Benutzer die Eingabetaste drückt. Ich habe gelesen, dass Jquery eine keypressed-Methode verwenden muss.

    $(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.......
}
}
});

Aber die Methode funktioniert nicht, irgendein Vorschlag?

Vielen Dank.

AKTUALISIEREN

Ich ändere den Code in dieses

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

aber es funktioniert nicht. Vermisse ich etwas? irgendeinen Vorschlag?

Danke.

Antworten:

Ihre Funktion würde wie folgt aussehen. In Ihrem document ready -Ereignis würden Sie .on () verwenden, um den Keypress-Ereignishandler an die Suchbox zu binden:

$(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
}
});

})

BEARBEITEN: aktualisierte Antwort gemäß der folgenden Diskussion.