javascript - AJAX autocomplete list has troubles updating when search term changes? -
i have search box gives autocomplete suggestions combined results of 2 api requests. seems working when user enters search term, if user modifies search term, problems occur.
for instance, if type "eternal" list, if narrow down search further adding "sunshine" query, suggestions don't change @ all. stuck on initial list shown 'eternal'.
any ideas on why might happening 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 }; }) } }); }
the request you're sending omdbapi.com doesn't spaces. i've noticed javascript errors in console.
given above, i've updated jquery follows (see comments i've changed):
disclaimer: no means production code, can re-factor/change things necessary.
html remains same
jquery
var results1 = []; var results2 = []; var combine = []; $(".searchbox").autocomplete({ source: function(request, response) { $.when(getseries(request), getmovies(request) ).done(function() { //only combine 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 response results1 - movies response(results1); } else if (results2 != undefined) { //set response results2 - series response(results2); } }); } }); function getmovies(request) { //replace spaces '+' 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; } }); } 
Comments
Post a Comment