동일한 페이지에서 jquery 자동 완성을 두 번 사용하는 방법

Question

내 문제는 동일한 페이지에서 jquery 자동 완성 라이브러리를 두 번 사용해야한다는 것입니다.

첫 번째 텍스트 필드를 정적으로 삽입하면 자동 완성 기능이 제대로 작동합니다. 그러나 두 번째 텍스트 필드를 삽입하려는 경우 첫 번째 텍스트 필드가 나타나는 위치에 자동 완성 결과가 표시됩니다.

두 텍스트 필드의 이름과 ID가 다르지만 텍스트 필드 2에 문자를 입력해도 텍스트 필드 1 아래에 자동 완성 결과가 표시됩니다. 내 자동 완성 기능에 문제가 있습니까?

  var aramaKeyword = jQuery.trim($("#input_header_scroll_ara_keyword").val()); 
      $('#input_header_scroll_ara_keyword').val(aramaKeyword); 

      $(function() { 
       $("#input_header_scroll_ara_keyword").autocomplete({ 
        source: function(request, response) { 
         $.ajax({ 
          url: baseUrl + "<?php echo URL_ARAMA_AUTOCOMPLETE; ?>", 
          dataType: "json", 
          async: false, 
          data: { 
           q: jQuery.trim($("#input_header_scroll_ara_keyword").val()) 
          }, 
          success: function(data) { 
           response($.map(data, function(item) { 
            return { 
             label: item, 
             value: item 
            } 
           }));      
          } 
         }); 
        }, 
        select: function(event, ui) { 
         var keyword = ui.item.value; 
         locateAraQuery('<?php echo URL_ARAMA; ?>', '<?php echo DEFAULT_STR_ARAMAQUERY_KEYWORD; ?>', '<?php echo lang('title_aradefaultkeyword'); ?>', keyword, '<?php echo ARAMA_SUFFIEX_BAR; ?>'); 
        }, 

        focus: function(event, ui) { 
         var keyword = ui.item.value; 
         $("#input_header_scroll_ara_keyword").val(keyword);    
        }, 
        minLength: 2, 
       }); 
      }); 

Answer 1

좋아요. 해결책을 찾았습니다.

appendTo: $("#input_header_scroll_ara_keyword").parent() 

나를 위해 일했습니다.