jquery ui autocomplete: chỉ kích hoạt khi mục không được chọn

Question

Tôi đang cố gắng tìm ra cách tạo ra một "đối diện" của một lựa chọn jquery ui. Khi ai đó không chọn một tùy chọn và chỉ cần loại đầu ra "jquery something" sẽ là: "đầu vào mới: jquery something". Tuy nhiên khi "jquery" được chọn nó sẽ được tốt đẹp để bằng cách nào đó chỉ có "được chọn từ danh sách: jquery", và ngăn chặn các propogation nhấn phím. Tuy nhiên, cả hai sự kiện đều cháy. Tôi đang cố gắng để làm cho nó một hay khác.

<input class="test" type="text" /> 

<script> 
$('.test').autocomplete({ 
    select: function (event, ui) { 
     alert('selected from list: ' + ui.item.label); 
     event.preventDefault(); 
     return false; 
    }, 
    source: ["jquery", "jquery ui", "sizzle"] 
}); 
$('.test').live('keypress', function (e) { 
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
     alert('new input: ' + $(this).val()); 
    } 
}); 
</script> 

Điều này xảy ra với giả định rằng phím "enter" được sử dụng để chọn tùy chọn từ trình đơn của ui.

Answer 1

Bạn có thể thực hiện việc này bằng sự kiện autocompletechange. Sử dụng sự kiện này, bạn có thể xác định nếu người dùng chọn một tùy chọn hoặc gõ một cái gì đó ở chỗ là không phải trên danh sách:

$("#auto").autocomplete({ 
    source: ['hi', 'bye', 'foo', 'bar'], 
    change: function(event, ui) { 
     console.log(this.value); 
     if (ui.item == null) { 
      $("span").text("new item: " + this.value); 
     } else { 
      $("span").text("selected item: " + ui.item.value); 
     } 
    } 
}); 

Ví dụ:http://jsfiddle.net/Ne9FH/