搜索词更改时，AJAX 自动完成列表无法更新？

Question

我有一个搜索框，它根据两个 API 请求的组合结果提供自动完成建议。当用户最初输入搜索词时，它似乎可以正常工作，但如果用户随后修改他们的搜索词，就会出现问题。

例如，如果您键入“Eternal”，您会得到一个很好的列表，但如果您通过在查询中添加“Sunshine”来进一步缩小搜索范围，则建议根本不会改变。它只是停留在“永恒”中显示的初始列表中。

任何关于为什么会发生这种情况的想法都将不胜感激。谢谢。

https://jsfiddle.net/7tx6rfwf/4/

HTML

<input type="text" class="searchbox" placeholder="Search here..." autocomplete="off">

jQuery

var results1 = [];
var results2 = [];
var combine = [];

$(".searchbox").autocomplete({
    source: function(request, response) {   
        $.when(GetSeries(request), GetMovies(request)
        ).done(function(){
            combine = results2.concat(results1);     

            combine.sort(function(a, b){
                return b.value.toLowerCase() > a.value.toLowerCase();
            });

            response(combine);     
            }
        )
    }
});

function GetMovies(request) {
    return $.ajax({
        'url': 'https://www.omdbapi.com/?s=' + 
                request.term +
                '&type=movie&r=json',
        'dataType': 'json',
        'success': function(data) {
            var list = data.Search;

            results1 = $.map(list, function(v,i){
                return {
                    label: v.Title + ' MOVIE (' + v.Year + ')',
                    value: v.Title
                };
            })
        }
    });
}

function GetSeries(request) {              
    return $.ajax({
        'url': 'https://www.omdbapi.com/?s=' + 
                request.term +
                '&type=series&r=json',
        'dataType': 'json',
        'success': function(data) {
            var list = data.Search;

            results2 = $.map(list, function(v,i){
                return {
                    label: v.Title + ' SERIES (' + v.Year + ')',
                    value: v.Title
                };
            })
        }
    });
}

Answer 1

您发送给omdbapi.com 的请求不喜欢空格。我还注意到控制台中的 javascript 错误。

鉴于上述情况，我已将您的 JQuery 更新如下（请参阅 cmets 了解我所做的更改）：

免责声明：这绝不是生产代码，因此您可以根据需要重构/更改内容。

Updated Fiddle

HTML 保持不变

JQuery

var results1 = [];
var results2 = [];
var combine = [];

  $(".searchbox").autocomplete({
    source: function(request, response) {   
      $.when(GetSeries(request), GetMovies(request)
        ).done(function() {
          //Only combine the results when both "result" objects contain values.
          if (results1 != undefined && results2 != undefined) {
            combine = results2.concat(results1);   
            combine.sort(function(a, b){
            return b.value.toLowerCase() > a.value.toLowerCase();
          });
          response(combine);   
        }
        else if (results1 != undefined) { //Set the response to results1 - Movies
          response(results1);
        }
        else if (results2 != undefined) { //Set the response to results2 - Series
          response(results2);
        }
      });
    }
  });

function GetMovies(request) {
    //Replace spaces with a '+'
    var url = request.term.replace(/\s/g,"+");
  return $.ajax({
    'url': 'https://www.omdbapi.com/?s=' + 
    url +
    '&type=movie&r=json',
    'dataType': 'json',
    'success': function(data) {
      var list = data.Search;
      if (list != undefined) {
        results1 = $.map(list, function(v,i){
          return {
            label: v.Title + ' MOVIE (' + v.Year + ')',
            value: v.Title
          }
        });
      }
      else results1 = undefined;
    }
  });
}

function GetSeries(request) {     
    var url = request.term.replace(/\s/g,"+");
  return $.ajax({
    'url': 'https://www.omdbapi.com/?s=' + 
    url +
    '&type=series&r=json',
    'dataType': 'json',
    'success': function(data) {
      var list = data.Search;
      if (list != undefined) {
        results2 = $.map(list, function(v,i){
          return {
            label: v.Title + ' SERIES (' + v.Year + ')',
            value: v.Title
          };
        });
      }
      else results2 = undefined;
    }
  });
}