Youtube 搜索自动完成不适用于 Framework 7

Question

我正在尝试将 Framework 7 自动完成功能用于 youtube 搜索 API v3。我使用 api 搜索 Jquery UI 进行自动完成。 Framework 7 还具有 Ajax 自动完成功能。但是我的代码不适用于 Framework 7。

这是我的 jquery UI 的 YouTube 搜索自动完成 js 代码，它 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，不会在文本输入时显示视频搜索建议..

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

希望对您有所帮助:)

Youtube 搜索自动完成不适用于 Framework 7

Youtube search autocomplete not working with Framework 7

youtube

ajax

jquery-ui

autocomplete

html-framework-7