将普通提交表单实时转换为ajax

Question

我是新来的，如果我的问题看起来很愚蠢，请原谅我

我有以下代码来搜索带有提交按钮（普通形式）的 youtube 视频

我想转为实时输入一旦用户写了任何单词，将获取结果取决于他写的内容

所以我补充

    $(".search_input").keyup(function(e) {

而不是

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

完整代码在这里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
    });
}

我希望我能得到你的帮助❤ 对你们每个人都充满爱。

Answer 1

目前您正在使用 keyup，它将按字母检查条目。

因此，您需要检查是否以“”，“，”结尾的键。等等，因为这主要意味着单词的结尾。

现在，当我们有了单词时，我们想将它添加到 以前输入的单词，所以你需要 将 new_word 连接或附加到 previous_words。

只有这样你才应该调用 AJAX 调用到使用 YouTube API 进行搜索的 URL 或脚本......

应该是这样的：

**

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