Jquery：ページ内で実行されているコードがレールでロードされていません

Question

これは、私のレールアプリケーションでjquery UIオートコンプリート用です。 1つのjavascriptファイルでは、私はすべての米国の州の名前を含むオブジェクトの配列を持っています。

var allStates = [ 
{ 
    "name": "Alabama", 
    "abbreviation": "AL" 
}, 
{ 
    "name": "Alaska", 
    "abbreviation": "AK" 
}, 
]; 

私のjavacript関数は次のとおりです。もともと私はこれらを別のJSファイルに入れましたが、すべてのオブジェクトの下の同じファイルの一番下に置いても機能しません。これらの関数の目的は、オブジェクトの配列からステートのすべての名前をvar Statesarray = ["Alabama"、 "Alaska"]のような配列に変換することです。私は私のページをロードする際

var statesArray = []; 
$(document).on('ready page:load', function(){ 
function singArray() { 
    for (var i = 0; i <allStates.length; i ++) { 
     statesArray.push(allStates[i].name); 
    } 
    return statesArray; 
} 
}) 

function updateStateSearch() { 
$("#state-field").autocomplete({ 
     source: statesArray 
    }); 
} 

しかし、配列への値のすべての変換は、（フォームが、それはjQueryのUIが使用する中であることが必要）、動作していないようです。たとえば、ページを読み込んでstatesArray.lengthのような型を入力すると、ページの読み込み時に配列にプッシュされるはずですが、返される値は0です。

注：オートコンプリートのためupdateStateSearch機能は、このイベントで実行されています。私のコードが機能しない理由

 <%= f.text_field :state, :id => "state-field", :onkeydown=>"updateStateSearch()" %> 

はfrank-であるためには？

Answer 1

、あなただけのどこにも呼び出されていない機能singArrayを定義しています。あなたは、アレイは、ページのロード時にロードされるようにしたい場合は、単にsingArrayの定義を削除します。

$(document).on('ready page:load', function(){ 
    for (var i = 0; i <allStates.length; i ++) { 
     statesArray.push(allStates[i].name); 
    } 
}); 

あなたは、ページの読み込み後に他のいくつかの時点で、配列を移入したい場合は、そこにsingArrayを呼び出す - 例えば：

function updateStateSearch() { 
    $("#state-field").autocomplete({ 
     source: singArray(); 
    }); 
} 

Answer 2

配列をどこかに入力するには、singArray()関数を呼び出す必要があります。ページのロードの

$(document).on('ready', function() { 
    var statesArray = []; 

    function singArray() { 
    for (var i = 0; i < allStates.length; i++) { 
     statesArray.push(allStates[i].name); 
    } 
    return statesArray; 
    } 

    singArray(); 

    function updateStateSearch() { 
    $("#state-field").autocomplete({ 
     source: statesArray 
    }); 
    } 
});