用於jQueryUI的Rails應用程序中的CORS自動完成功能

Question

我有一個Rails應用程序，我在使用jQuery UI Autocomplete在搜索時建議產品名稱 - 這一切都正常。然而，我們已經推出了一個單獨的論壇應用程序，這是一個子域，我也想提供相同的功能。

我已經在論壇上設置了jQuery UI，並且演示代碼（其中數據以內聯方式顯示）工作正常。但是，當我將源切換到我的Rails應用程序mysite.com/products/names Chrome報告請求已被取消 - 這當然是因爲跨站點請求，這意味着我必須使用JSONP或設置跨源資源共享。

在Rails IRC聊天室聊天后，建議使用CORS，所以這是我選擇的選項。

我已經加入這個我的應用程序控制器：

before_action :allow_cross_domain_access 

def allow_cross_domain_access 
    if request.headers["HTTP_ORIGIN"] 
    # better way check origin 
    # if request.headers["HTTP_ORIGIN"] && /^https?:\/\/(.*)\.some\.site\.com$/i.match(request.headers["HTTP_ORIGIN"]) 
    headers['Access-Control-Allow-Origin'] = '*' 
    headers['Access-Control-Expose-Headers'] = 'ETag' 
    headers['Access-Control-Allow-Methods'] = 'GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD' 
    headers['Access-Control-Allow-Headers'] = '*,x-requested-with,Content-Type,If-Modified-Since,If-None-Match,Auth-User-Token' 
    headers['Access-Control-Max-Age'] = '86400' 
    headers['Access-Control-Allow-Credentials'] = 'true' 
    end 
end 

我曾以此爲出發點的JS：

$(function() { 
    url = "http://www.mysite.com/products/names" 
    $("#search_bar").autocomplete(
    { 
     crossDomain: true, 
     type: "GET", 
     dataType: "json", 
     source: url, 

    }) 
}); 

，我需要從這裏去任何想法？作爲參考，在這裏是從文檔的JSONP演示代碼：
http://jqueryui.com/autocomplete/#remote-jsonp

<script> 
    $(function() { 
    function log(message) { 
     $("<div>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 

    $("#city").autocomplete({ 
     source: function(request, response) { 
     $.ajax({ 
      url: "http://ws.geonames.org/searchJSON", 
      dataType: "jsonp", 
      data: { 
      featureClass: "P", 
      style: "full", 
      maxRows: 12, 
      name_startsWith: request.term 
      }, 
      success: function(data) { 
      response($.map(data.geonames, function(item) { 
       return { 
       label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
       value: item.name 
       } 
      })); 
      } 
     }); 
     }, 
     minLength: 2, 
     select: function(event, ui) { 
     log(ui.item ? 
      "Selected: " + ui.item.label : 
      "Nothing selected, input was " + this.value); 
     }, 
     open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 
    }); 
    }); 
    </script> 

任何想法我怎麼能適應這個與CORS的工作嗎？

編輯：我已經試過......

（1）如果試圖使用JSONP（不知道如何與CORS做到這一點）。這是給我一個500 Internal Server Error，直到我將name_startsWith更改爲term。現在看看通過Chrome的網絡選項卡中的開發工具的響應，我得到我的建議來通過確定在響應（例如：["name1", "name2", "name3"]，並在預覽選項卡中顯示爲：

0: "name1" 
1: "name2" 
2: "name3" 

我想我需要調整success讓這些顯示在搜索欄中建議：

<script> 
    $(function() { 
    $("#search_bar").autocomplete({ 
     source: function(request, response) { 
     $.ajax({ 
      url: "http://www.mysite.com/products/names?jsonp_callback=?", 
      dataType: "jsonp", 
      data: { 
      term: request.term 
      }, 
      success: function(data) { 
      response($.map(data.geonames, function(item) { 
       return { 
       label: item.name, 
       value: item.name 
       } 
      })); 
      } 
     }); 
     }, 
     minLength: 2, 
     select: function(event, ui) { 
     log(ui.item ? 
      "Selected: " + ui.item.label : 
      "Nothing selected, input was " + this.value); 
     }, 
     open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 
    }); 
    }); 
    </script> 

這裏是我用我的Rails應用程序中的CoffeeScript：

initialize = -> 
    $('#search_bar').autocomplete 
    source: $('#search_bar').data('autocomplete-source') 
    select: (event, ui) -> 
     $(this).parents("form").submit() 
    focus: (event, ui) -> 
     $('#search_bar').val(ui.item.value) 

$(document).ready initialize 

，這是它轉換爲JS：

jQuery(function() { 
    return $('#search_bar').autocomplete({ 
    source: $('#search_bar').data('autocomplete-source'), 
    select: function(event, ui) { 
     return $(this).parents("form").submit(); 
    }, 
    focus: function(event, ui) { 
     return $('#search_bar').val(ui.item.value); 
    } 
    }); 
}); 

理想情況下，我想，因爲它的父應用程序所做的只是以同樣的方式進行。任何想法，我需要從這裏去？

Answer 1

由於通過IRC討論，

$("#breed").autocomplete({ 
     source: function(request, response) { 
     $.ajax({ 
      url: "http://yourservername.com/dogs/names", 
      dataType: "jsonp", 
      data: { 
      featureClass: "P", 
      style: "full", 
      maxRows: 12, 
      term: request.term 
      }, 
      success: function(data) { 
      //console.log(data); 
      response($.map(data, function(item) { 
       return item; 
      })); 
      } 
     }); 
     }, 
... 

您的JSON實際上沒有「對象」，只是一個數組..所以每個物品都可以當你改變術語名稱返回一個項目..，你也必須在這裏改變參數。

小提琴通過IRC發送，說明您的JSON數據的工作代碼。

參考文獻：http://jqueryui.com/autocomplete/#remote-jsonp