Bind jQuery UI autocomplete sử dụng .live()

Question

Tôi đã tìm kiếm khắp nơi, nhưng tôi dường như không thể tìm thấy bất kỳ sự giúp đỡ ...

Tôi có một số textbox được tạo ra tự động qua JS, vì vậy tôi cần phải ràng buộc tất cả các lớp học của họ thành tự động hoàn thành. Kết quả là, tôi cần sử dụng tùy chọn .live() mới.

Như một ví dụ, để ràng buộc tất cả các mục có một lớp học của .foo bây giờ và trong tương lai tạo:

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

Phải mất (và cư xử) giống như .bind(). Tuy nhiên, tôi muốn để ràng buộc một autocomplete ...

này không hoạt động:

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

Làm thế nào tôi có thể sử dụng .live() để ràng buộc autocomplete?

CẬP NHẬT

đặn nó ra với Framer:

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

Answer 1

Nếu bạn đang sử dụng jquery.ui.autocomplete.js thử này để thay thế

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

nếu không, sử dụng jquery.ui.autocomplete.js và xem nếu nó sẽ làm việc

Nếu điều đó không áp dụng, tôi không biết làm thế nào để giúp bạn bro

Answer 2

autocomplete không phải là một sự kiện khá một chức năng cho phép chức năng autocomplete cho một textbox.

Vì vậy, nếu bạn có thể sửa đổi js tạo hộp văn bản động để bọc phần tử hộp văn bản như một đối tượng jquery và gọi tự động hoàn thành trên đối tượng đó.

Answer 3

Bạn không thể. .live() chỉ hỗ trợ các sự kiện JavaScript thực, chứ không hỗ trợ bất kỳ sự kiện tùy chỉnh nào. Đây là một hạn chế cơ bản về cách thức .live() hoạt động.

Answer 4

Chỉ cần thêm, bạn có thể sử dụng plugin .livequery cho việc này:

$('.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 5

Tôi vừa mới nhận thấy bạn đã chỉnh sửa bài đăng của mình bằng câu trả lời này. Rõ ràng với tôi vì vậy tôi đăng nó dưới đây cho những người khác. Cảm ơn bạn.

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

Answer 6

Chức năng tự động hoàn thành jQuery UI tự động thêm lớp "ui-autocomplete-input" vào phần tử. Tôi muốn khuyên bạn nên liên kết trực tiếp phần tử trên tiêu điểm mà không có lớp "ui-autocomplete-input" để ngăn chặn việc ràng buộc lại mọi sự kiện keydown trong phần tử đó.

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

Sửa

câu trả lời của tôi bây giờ đã quá hạn kể từ jQuery 1.7, xem bình luận Nathan Strutz của để sử dụng với .on() cú pháp mới.

Answer 7

.live() không hoạt động với tiêu điểm. cũng keyup.autocmplete không có ý nghĩa gì cả. Thay vào đó, điều tôi đã thử và làm việc là

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

Điều này hoàn toàn phù hợp.

Answer 8

Bạn có thể thử sử dụng này:

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

Answer 9

này làm việc cho tôi:

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

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

    }); 
}); 

Answer 10

Sau khi đọc và kiểm tra tất cả mọi người của người khác câu trả lời tôi đã cập nhật nó cho phiên bản hiện tại của JQuery và thực hiện một vài chỉnh sửa.

Sự cố khi sử dụng phím tắt khi sự kiện gọi .autocomplete() là sự cố không tự động hoàn tất cho chữ cái đầu tiên được nhập. Sử dụng tiêu điểm là lựa chọn tốt hơn.

Một điều khác mà tôi đã nhận thấy là tất cả các giải pháp đã cho kết quả là .autocomplete() được gọi nhiều lần. Nếu bạn thêm phần tử động vào trang sẽ không bị xóa lần nữa, sự kiện chỉ nên được kích hoạt một lần. Ngay cả khi mục bị xóa và được thêm lại, sự kiện sẽ bị xóa và sau đó thêm lại mỗi khi phần tử bị xóa hoặc thêm vào để tập trung vào trường một lần nữa sẽ không cần thiết gọi .autocomplete() mỗi lần.

mã cuối cùng của tôi là như sau:

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

Answer 11

Để có được làm việc autocomplete khi nạp tự động cho sự kiện on() sử dụng trong jQuery> 1,7, sử dụng cú pháp Nathan Strutz cung cấp trong bình luận của ông:

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

trong đó .my-field là bộ chọn cho phần tử nhập tự động hoàn thành của bạn.

Answer 12

Bạn chỉ có thể đặt tự động hoàn bên trong sự kiện trực tiếp đầu vào, như thế này:

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

 
});