CODEWITHSUNDEEP
javascriptjqueryjsonajaxautocomplete
m0a
m0a

Reputation: 1005

AJAX autocomplete list has troubles updating when search term changes?

I have a search box that gives autocomplete suggestions from the combined results of two API requests. It seems to be working when the user initially enters a search term, but if the user then modifies their search term, problems occur.

For instance, if you type "Eternal" you get a good list, but if you narrow down the search further by adding "Sunshine" to the query, the suggestions don't change at all. It just is stuck on that initial list shown from 'Eternal'.

Any ideas on why this might be happening would be appreciated. Thank you.

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

Upvotes: 1

Views: 77

Answers (1)

Yass
Yass

Reputation: 2668

The request you're sending to omdbapi.com doesn't like spaces. I've also noticed javascript errors in the console.

Given the above, I've updated your JQuery as follows (see the comments for what I've changed):

DISCLAIMER: This is by no means production code, so you can re-factor/change things as necessary.

Updated Fiddle

Html remains the same

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

Upvotes: 1

Related Questions