Youtube search autocomplete не работает с Framework 7

Question

Я пытаюсь использовать функцию автозаполнения Framework 7 с помощью API поиска youtube v3. Я использовал поиск api для автозаполнения с использованием JQuery UI. В Framework 7 также есть функция автозаполнения Ajax. Но мой код не работает с Framework 7.

Вот моего YOUTUBE Автозаполнение поиска код расслоения плотной Jquery UI, который работает на 100% и показывает вверх видео поиск предложения по вводу текста

//code for auto complete using jquery UI works perfect 
jQuery("#vid-search").autocomplete({ 
      source: function(request, response) { 
      //console.log(request.term); 
      var sqValue = []; 
      jQuery.ajax({ 
       type: "POST", 
       url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1", 
       dataType: 'jsonp', 
       data: jQuery.extend({ 
        q: request.term 
       }, { }), 
       success: function(data){ 
        console.log(data[1]); 
        obj = data[1]; 
        jQuery.each(obj, function(key, value) { 
         sqValue.push(value[0]); 
        }); 
        response(sqValue); 
       } 
      }); 
      }, 
      select: function(event, ui) { 
      setTimeout(function() { 
       youtubeApiCall(); 
      }, 300); 
      } 
     }); 

А вот мой YouTube поиск автозавершения кода с каркасом 7, неужели это огорчило показать поиска видео предложения по текстовой inpute ..

var autocompleteDropdownAjax = myApp.autocomplete({ 
input: '#autocomplete-dropdown-ajax', 
openIn: 'dropdown', 
preloader: true, //enable preloader 
valueProperty: 'id', //object's "value" property name 
textProperty: 'name', //object's "text" property name 
limit: 20, //limit to 20 results 
dropdownPlaceholderText: 'Try "JavaScript"', 
expandInput: true, // expand input 
source: function (autocomplete, query, request, response, render) { 
    var results = []; 
    if (query.length === 0) { 
     render(sqValue); 
     return; 
    } 
    // Show Preloader 
    autocomplete.showPreloader(); 
    // Do Ajax request to Autocomplete data 
    $$.ajax({ 
     type: "POST", 
       url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1", 
       dataType: 'jsonp', 
       data: jQuery.extend({ 
        q: request.term 
       }, { }), 
     success: function (data) { 
      // Find matched items 
      console.log(data[1]); 
        obj = data[1]; 
        jQuery.each(obj, function(key, value) { 
         sqValue.push(value[0]); 
        }); 
        response(sqValue); 
      // Hide Preoloader 
      autocomplete.hidePreloader(); 
      // Render items by passing array with result items 
      render(sqValue); 
     } 

    }); 
}, 
select: function(event, ui) { 
      setTimeout(function() { 
       youtubeApiCall(); 
      }, 300); 
      } 
}); 

Answer 1

это происходит потому, что результат JSon должен быть в специальном формате, результат оказываемая API выглядит следующим образом:

["funn",["funny vines","funny videos 2016","funny videos","funny","funnel vision","funny cat videos","funny fails","funny pranks","funny cats","funny songs"]] 

Первый родительский массив имеет введенный вами запрос, второй дочерний массив имеет массив результатов, вы должны нажать дочерний массив на результат.

for (var i = 0; i < data[1].length; i++) { 
    results.push(data[1][i]) 
} 

И вот результат:

Полный код:

var autocompleteDropdownAjax = myApp.autocomplete({ 
    input: '#autocomplete-dropdown-ajax', 
    openIn: 'dropdown', 
    preloader: true, //enable preloader 
    valueProperty: 'value', //object's "value" property name 
    textProperty: 'text', //object's "text" property name 
    limit: 20, //limit to 20 results 
    dropdownPlaceholderText: 'Search Youtube', 
    expandInput: true, // expand input 
    source: function(autocomplete, query, render) { 
    var results = []; 
    var returned = []; 
    if (query.length === 0) { 
     render(results); 
     return; 
    } 
    // Show Preloader 
    autocomplete.showPreloader(); 
    // Do Ajax request to Autocomplete data 
    $$.ajax({ 
     url: 'http://suggestqueries.google.com/complete/search?client=firefox&ds=yt', 
     method: 'GET', 
     crossDomain: true, 
     dataType: 'json', 
     //send "query" to server. Useful in case you generate response dynamically 
     data: { 
     q: query 
     }, 
     success: function(data) { 
     // Find matched items 
     for (var i = 0; i < data[1].length; i++) { 
      results.push(data[1][i]) 
     } 

     // Hide Preoloader 
     autocomplete.hidePreloader(); 
     // Render items by passing array with result items 
     render(results); 
     } 
    }); 
    } 
}); 

Я надеюсь, что это помогает :)