.live ()를 사용하여 jQuery UI 자동 완성 바인딩

.live ()를 사용하여 jQuery UI 자동 완성 바인딩

---

모든 곳을 검색했지만 도움을 찾을 수없는 것 같습니다 ...

JS를 통해 동적으로 생성되는 일부 텍스트 상자가 있으므로 모든 클래스를 자동 완성에 바인딩해야합니다. 결과적으로 새로운 .live () 옵션을 사용해야합니다.

예를 들어 모든 항목을 .foo 클래스로 바인딩하려면 다음을 수행하십시오.

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

.bind ()와 동일하게 작동합니다. 그러나 자동 완성을 바인딩하고 싶습니다.

작동하지 않습니다.

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

.live ()를 사용하여 자동 완성을 바인딩하려면 어떻게해야합니까?

최신 정보

Framer로 알아 냈습니다.

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

---

jquery.ui.autocomplete.js대신 이것을 사용하는 경우

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

그렇지 않은 경우을 사용하고 jquery.ui.autocomplete.js작동하는지 확인하십시오.

그게 적용되지 않으면 어떻게 도와 줄지 모르겠어요

---

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

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

편집하다

내 대답은 jQuery 1.7 이후로 오래되었습니다 .on(). 새로운 구문 과 함께 사용하려면 Nathan Strutz의 주석을 참조하십시오 .

---

추가하기 위해 .livequery플러그인을 사용할 수 있습니다 .

$('.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);
});

---

on()Nathan Strutz가 주석에서 제공하는 구문을 사용하여 jQuery> 1.7에서 사용 된 이벤트에 대해 동적으로로드 될 때 자동 완성이 작동하도록하려면 다음을 수행하십시오 .

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

.my-field자동 완성 입력 요소의 선택기는 어디에 있습니까 ?

---

.live ()는 포커스와 함께 작동하지 않습니다. 또한 keyup.autocmplete는 의미가 없습니다. 대신 내가 시도하고 일한 것은 이것입니다.

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

이것은 완벽하게 잘 작동합니다.

---

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

---

이것을 사용해 볼 수 있습니다.

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

---

다른 모든 사람의 답변을 읽고 테스트 한 후 현재 버전의 JQuery에 대해 업데이트하고 몇 가지 조정했습니다.

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

Another thing I have noticed is that all of the given solutions result in .autocomplete() being called multiple times. If you are adding an element dynamically to the page that will not be removed again, the event should only be fired once. Even if the item is to be removed and added again, the event should be removed and then added back each time the element is removed or added so that focusing on the field again will not unnecessarily call .autocomplete() every time.

My final code is as follows:

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

---

autocomplete is not an event rather a function that enables autocomplete functionality for a textbox.

So if you can modify the js that creates the textboxes dynamically to wrap the textbox element in as a jquery object and call autocomplete on that object.

---

I just noticed you edited your post with this answer. It was obvious to me so I'm posting it below for others. Thank you.

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

---

This works for me:

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

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

  });
});

---

You can just put the autocomplete inside input live event, like this:

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

});

참고URL : https://stackoverflow.com/questions/4551230/bind-jquery-ui-autocomplete-using-live