TransWikia.com

convert normal submit form to ajax real time

Stack Overflow Asked by Jackmurine on November 4, 2021

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.

One 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);
  }
});

Answered by besl lu on November 4, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP