2014-12-08 3 views
2

자동 완성 기능을 구현하려고 시도하면서 저를 곤혹스럽게 한 문제를 발견했습니다. 처음으로 .autocomplete를 호출하면 정상적으로 작동하며 아무런 문제가 없습니다. 그러나 DOM에서 일부 (관련없는) 요소를 제거하고 DOM에 새 섹션을 추가 한 후에이를 호출하면 자동 완성이 수행하지 않으며 오류가보고되지 않습니다. 코드 : - 페이지Jquery UI dom 조작 후 자동 완성 기능이 작동하지 않습니다.

$.ajax({ 
    type : 'get', 
    dataType : 'json', 
    url : '/finance/occupations', 
    cache:true, 
    success:function(data){ 
     occupationList = data; 
     $('.js-occupation').autocomplete({ 
      source: occupationList, 
      messages: { 
       noResults: '', 
       results: function(){} 
      }, 
      minLength : 2, 
      select:function(event, ui){ 
       $('.js-occupationId').val(ui.item.id); 
      } 
     }); 
    } 
}); 

배경은 사용자가 그들을 통해 이동으로 조작 여러 섹션이 포함되어 있다는 것입니다. 숨기기 및 표시는 제대로 작동하며 자동 완성에 영향을주지 않습니다. 그러나, 내가 할 경우 다음과 같은 : - 사용자에게 다음 자동 완성 작동이 중지 이전 섹션에 여러 개의 주소를 추가 할 수있는 합성을 제공

  var section = $('.js-addressForm:last').clone(); 
      clearForm(section); 
      $('div.addressDetails').append(section); 
      $('.js-addressForm:first').remove(); 

.

어떤 제안이나 확실한 포인터가 있습니까?

요소가 포커스를 얻었지만 여전히 작동하지 않을 때 이벤트에 자동 완성의 초기화를 넣으려고했습니다.

+0

자동 완성이'.js-addressForm : first' .. 안에 있습니까? HTML 또는 온라인 데모를 볼 수 있습니까? –

+0

아니. .. 그것은 완전히 다른 섹션에있다. .. 그것은 이상한 작은 이유 다. –

+0

온라인 데모에서 이것을 재현 할 수 있습니까? –

답변

0

다른 모든 기본 개체 뒤에 자동 완성을 만들어야합니다. F12를 누르면 목록이 "표시"되지만 목록 뒤에 표시되는 모든 인스턴스에 의해 숨겨집니다.

입력이있는 div (하나의 입력이 자동 완성)를 만든 경우 자동 완성을 만든 다음 대화 상자 인스턴스를 만들면 자동 완성이 표시되지 않습니다. 대화 상자를 만든 다음 자동 완성을 사용하면 문제가 없습니다. 문제는 z 주문입니다.

+0

문제는 표시되지 않고 자동 완성 기능이 아무 것도하지 않는 것이 아닙니다. 그래서 JS는 내가 DOM을 조작 한 후에 타이핑을 시작할 때 시작되지 않습니다. –

0

같은 문제가 발생했습니다. 지금은이 문제를 해결하기 위해 입력이 집중되면 위젯을 작성합니다. 문제를 해결하는 데 도움이됩니다.

당신이 내 문제를 해결이

$("#target").focus(function() { 
    //I don't care if you manipulated the DOM or not. I'll be cautious. ;) 

    (function() { 
    $("#combobox").combobox(); 
    $("#toggle").click(function() { 
     $("#combobox").toggle(); 
    }); 
    })(); 

    // use a flag variable if you want 
}); 

모양을 making sure some event bing only when needed

샘플 코드에 도움을 찾아보실 수 있습니다. 당신이 찾고있는 해결책을 희망하십시오

관련 문제