オートコンプリートが正しく動作しない

Question

私のオートコンプリートは、ページがリロードされたという条件でのみ動作します。リンクを介してページに移動すると、これは機能しません。私は使用したソースコードとデモを含んでいます。デモでは、var dataフィールドを変更して、アプリケーションでフェッチしている値を表示しました。

注：これはRuby on Railsアプリケーション用です。

誰かがこれに間違っていると言うことができますか？

<script> 
    $(function() { 
     var doctors = <%== @doctors %>; 

     var data = doctors.map(function (a) { 
      return { label: a[0], id: a[1] }; 
     }); 

     $('#tags').autocomplete({ 
      delay: 0, 
      source: data, 
      select: function(event, ui) { 
       $('#doctor_id').val(ui.item.id); 
      } 
     }); 
    }); 


</script> 

HTMLコード：

<div class="row"> 
       <div class="input-field col s12 m6"> 
       <i class="material-icons prefix">textsms</i> 
       <label class="active" for="tags">Doctor</label> 
       <input id="tags" type="text" class="autocomplete" required/> 
       <input id="doctor_id" name="doctor_id" type="hidden" required/> 
       </div> 
       </div> 

デモ：JSfiddle

Answer 1

私はそれだけで罰金こちらをご覧

は、ヘッド部分である持って実行し、正しいスクリプトを使用してコードを試してみました

<meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Autocomplete - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 

ここ

あなたのフィドルスクリプトが

var data = [ 
    {label: "Ann Perera", id: 1}, 
    {label: "Sam Perera", id: 2}, 
    {label: "John Perera", id: 3} 
    ]; 

    $('#tags').autocomplete({ 
     delay: 0, 
     source: data, 
     select: function(event, ui) { 
      $('#doctor_id').val(ui.item.label); 
     } 
    }); 
});