自動完成功能無法正常工作

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