Youtube Suche Autocomplete funktioniert nicht mit Framework 7

Question

Ich versuche, Framework 7 Autocomplete-Funktion mit Youtube Search API v3 zu verwenden. Ich hatte Such-API für die automatische Vervollständigung mit Jquery UI verwendet. Framework 7 hat auch Ajax-Autocomplete-Funktion. Aber mein Code ist nicht mit Rahmen arbeiten 7.

Hier meine youtube Suche die automatische Vervollständigung ist js Code für jQuery UI, die zu 100% funktioniert und zeigt sich Videosuche Vorschlag zur Texteingabe

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

Und hier ist mein youtube Suche zum automatischen Vervollständigung Code mit Rahmen 7, Doest Video Suchvorschläge auf Text inpute zeigen ..

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

das liegt daran, dass das JSon Ergebnis in einem speziellen Format sein sollte, das Ergebnis durch die API gemacht wie folgt aussieht:

Das erste übergeordnete Array hat die von Ihnen eingegebene Abfrage, das zweite untergeordnete Array hat das Ergebnisarray, Sie müssen das untergeordnete Array auf das Ergebnis schieben.

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

Und hier ist das Ergebnis:

Voll Code:

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

Ich hoffe, das hilft :)