바인딩 jQuery를 UI 자동 완성()

Question

나는 모든 곳에서 검색 한,하지만 난 어떤 도움을 찾을 수 없습니다 ...

나는 그래서 난에 JS를 통해 동적으로 생성 된 일부 텍스트 상자를 필요로했다 모든 클래스를 자동 완성에 바인딩합니다. 결과적으로 새로운 .live() 옵션을 사용해야합니다. 예를 들어

가 만들어 지금 .foo와 미래의 클래스와 모든 항목을 바인딩 :

는

$('.foo').live('click', function(){ 
    alert('clicked'); 
}); 

이 소요 (및 작동) .bind과 동일(). 그러나, 나는 자동 완성을 바인딩 할 ...

이 작동하지 않습니다 :

$('.foo').live('autocomplete', function(event, ui){ 
    source: 'url.php' // (surpressed other arguments) 
}); 

가 어떻게 자동 완성을 바인딩 .live()를 사용할 수 있습니까?

UPDATE

는 프레이머 그것을 알아 냈 :

$(function(){ 
    $('.search').live('keyup.autocomplete', function(){ 
    $(this).autocomplete({ 
     source : 'url.php' 
    }); 
    }); 
}); 

Answer 1

, 나는 방법을 모른다

$('.foo').livequery(function() { 

    // This will fire for each matched element. 
    // It will also fire for any new elements added to the DOM. 
    $(this).autocomplete(options); 
}); 

: 그냥 추가하면

Answer 2

자동 완성이 아니라 이벤트 텍스트 상자에 대한 자동 완성 기능을 가능하게하는 기능이 아닙니다.

따라서 텍스트 상자를 jquery 개체로 랩핑하고 해당 개체에서 자동 완성을 호출하도록 동적으로 텍스트 상자를 만드는 j를 수정할 수 있다면.

Answer 3

수 없습니다. .live()는 사용자 정의 이벤트가 아닌 실제 JavaScript 이벤트 만 지원합니다. 이것은 .live()가 작동하는 방식의 근본적인 제한 사항입니다. 당신이이 jquery.ui.autocomplete.js 대신

.bind("keydown.autocomplete") or .live("keydown.autocomplete") 

없는 경우이 시도 jquery.ui.autocomplete.js를 사용하고이 적용되지 않는 경우가

작동합니다 있는지 사용하는 경우

Answer 4

을 동생 아 수 있도록, 당신은이에 대한 .livequery 플러그인을 사용할 수 있습니다

Answer 5

방금이 답변으로 귀하의 게시물을 편집하신 것으로 나타났습니다. 나에게는 분명 했으므로 다른 사람들을 위해 아래에 게시하고 있습니다. 고맙습니다.

$(function() 
{ 
    $('.search').live('keyup.autocomplete', function() 
    { 
    $(this).autocomplete({ source : 'url.php' }); 
    }); 
}); 

Answer 6

jQuery UI 자동 완성 기능은 "ui-autocomplete-input"클래스를 요소에 자동으로 추가합니다. "ui-autocomplete-input" 클래스를 사용하지 않고 포커스가있는 요소를 바인딩 한 라이브 바인딩을 사용하여 해당 요소 내의 모든 keydown 이벤트에 대한 재 바인딩을 방지하는 것이 좋습니다.

$(".foo:not(.ui-autocomplete-input)").live("focus", function (event) { 
    $(this).autocomplete(options); 
}); 

편집

내 대답은 jQuery를 1.7부터 오래된 지금, 새로운 .on() 구문을 사용 나단 Strutz의 의견을 참조하십시오.

Answer 7

.live()는 포커스가있는 상태에서 작동하지 않습니다. 또한 keyup.autocmplete는 의미가 없습니다. 는 대신 것은 내가 시도와 작업이 완벽하게 잘 작동이

$(document).ready(function(){ 
$('.search').live('keyup' , function() 
    { 
    $(this).autocomplete({ source : 'url.php' }); 
    }); 
}) 

입니다. 나는 JQuery와의 현재 버전을 업데이트 한 답변을 읽고 다른 사람의 테스트 한 후

$(function() 
{ 
    $('.item_product').live('focus.autocomplete', function() 
    { 

    $(this).autocomplete("/source.php/", { 
     width: 550, 
     matchContains: true, 
     mustMatch: false, 
     selectFirst: false, 
    }); 

    }); 
}); 

Answer 8

이 사용 시도 할 수 있습니다 비틀기.

.autocomplete()을 호출하는 이벤트로 keydown을 사용할 때의 문제는 입력 한 첫 번째 문자에 대해 자동 완성에 실패한다는 것입니다. 초점을 사용하는 것이 더 나은 선택입니다.

내가 알아챈 또 다른 사실은 주어진 솔루션 모두가 .autocomplete()이 여러 번 호출된다는 것입니다. 다시 삭제되지 않을 페이지에 요소를 동적으로 추가하는 경우 이벤트는 한 번만 발생해야합니다. 항목을 제거하고 다시 추가하더라도 이벤트를 제거한 다음 요소를 제거하거나 추가 할 때마다 다시 추가해야 필드에 다시 초점을 맞추어 불필요하게 .autocomplete() 번을 호출하지 않아도됩니다. jQuery를> 1.7에서 사용되는 on() 이벤트를 동적으로로드 할 때

$(document).on('focus.autocomplete', '#myAutocomplete', function(e){ 
    $(this).autocomplete(autocompleteOptions); 
    $(document).off('focus.autocomplete', '#myAutocomplete'); 
}); 

Answer 9

이 나를 위해 작동합니다

Answer 10

을 몇을했다 :

$('.foo').live('focus.autocomplete', function() { 
    $(this).autocomplete({...}); 
}); 

Answer 11

자동 완성 작업을 얻으려면, 나단 Strutz 그의 주석에서 제공하는 구문을 사용하여 : :

$(document).on('focus', '.my-field:not(.ui-autocomplete-input)', function (e) { 
    $(this).autocomplete(options) 
}); 

을 다음과 같이

내 마지막 코드는

여기에서 .my-field은 자동 완성 입력 요소의 선택 자입니다.

Answer 12

당신은 다음과 같이 입력 라이브 이벤트 내부의 자동 완성을 넣을 수 있습니다 :

$('#input-element').live('input', function(){ 
 
    
 
$("#input-element").autocomplete(options); 
 

 
});