convert normal submit form to ajax real time

Question

im new here so forgive me if my question seems to be stupid
i have the following code to search youtube video with submit button (normal form)
i want to turned to real time input once the user write any word will fetch result depend on what wrot by hime
so i add
    $(".search_input").keyup(function(e) {

instead of
    $("form").on("submit", function(e) {

full code is here https://jsfiddle.net/5ymndbax/


function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/{{(.*?)}}/g,function(e,r){return t[n][r]})}return res}

$(function() {
    $(".search_input").keyup(function(e) {
       e.preventDefault();
       // prepare the request
       var request = gapi.client.youtube.search.list({
            part: "snippet",
            type: "video",
            q: $("#search").val(),
            order: "viewCount",
            publishedAfter: "2000-01-01T00:00:00Z"
       }); 
       // execute the request
       request.execute(function(response) {
          var results = response.result;
          $("#results").html("");
          $.each(results.items, function(index, item) {
            $.get("tpl/item.html", function(data) {
                $("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
            });
          });
          resetVideoHeight();
       });
        
    });
    
    $(window).on("resize", resetVideoHeight);
});

function resetVideoHeight() {
    $(".video").css("height", $("#results").width() * 9/16);
}

function init() {
    gapi.client.setApiKey("key");
    gapi.client.load("youtube", "v3", function() {
        // yt api is ready
    });
}

i hope can i got some help from you ❤
full of love to each of you.

besl lu · Answer

Currently you are using keyup, and that will check entry by letter.
So you need to check did key up ended with " ",",","." etc. for that will mostly mean the end of the word.
Now when we have the word, we want to add that to
previously entered words so you need to
concatenate or append new_word to previous_words.
And only then you should call AJAX call to URL or script that is using YouTube API for search...
It should go something like this:
**


event.preventDefault();
$.ajax({
  type:"GET",
  url: "youtube url or some script preforming to yt api call",
  data:{"search": previous_words,},
  success:function(data){
    //display data somewhere
    console.log(data);
  }
});

convert normal submit form to ajax real time

One Answer

Add your own answers!

Ask a Question