자동 완성이 제대로 작동하지 않습니다.

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