Sự kiện Fire Onchange sau khi AutoComplete

Question

Tôi đang cố gắng thực hiện sự kiện Tự động điền và thay đổi cùng một lúc.

Có nghĩa là: Tôi muốn kích hoạt sự kiện thay đổi trong hộp văn bản tự động hoàn thành. Khi tôi viết nội dung nào đó vào hộp văn bản từ bàn phím và nhấp vào bên ngoài hộp văn bản, sau đó bật sự kiện kích hoạt nhưng khi tôi chọn nội dung nào đó từ sự kiện tự động đề xuất tên onchange sẽ không kích hoạt.

My HTML Mã

<div style="width: 34%"> 
    Person Name:<input id="txt0" type="text" onchange="SaveData('txt0')" class="userSearch" placeholder="Helped Person" /> 
</div> 

Javascript Mã

function AutoComplete() { 
//Autocomplete added to the textbox. 
$('.userSearch').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "CTC.aspx/GetMemberName", 
      data: "{ 'prefixText': '" + request.term + "' }", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 
       response(data.d) 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert('Error occured while autocomplete'); 
      } 
     }); 
    }, 
    minLength: 1 
}); 
} 

function SaveData(textBoxId) { 
    alert(textBoxId); 
} 

Tôi muốn bắn sự kiện onchange sau khi được lựa chọn từ autocomplete.

Vui lòng trợ giúp

Cảm ơn bạn trước.

Answer 1

Bạn có thể sử dụng sự kiện thay đổi trên widget autocomplete để đạt được điều này. http://api.jqueryui.com/autocomplete/#event-change

Ví dụ:

function AutoComplete() { 
    //Autocomplete added to the textbox. 
    $('.userSearch').autocomplete({ 
     source: function (request, response) { 
     // your ajax code 
     }, 
     minLength: 1, 
     change: function (event, ui) { SaveData(); } 
    }); 
} 

Answer 2

$('.userSearch').trigger('change'); 

Điều đó sẽ kích hoạt "thay đổi" sự kiện

Answer 3

KDRVN là đúng.

$(".selector").autocomplete({ 
    select: function(event, ui) {} 
}); 

như trong

$("#models").autocomplete({source: models, select: function(event, ui) {alert('flippy');} }); 

Không bất kỳ trong số này:

$('#models').on('select', function() { alert('waawoo'); }); 
    $('#models').on('change', function() { alert('feefaa'); }); 
onchange="updateModels(this)" 

Answer 4

$('#1').autocomplete({ 
    select: function(event, ui) { 
     "use strict"; 
     alert('select event called'); 
     }, 
    source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"], 

    minLength: 1, 
    change: function(event, ui) { 
     if (ui.item) { 
      alert("ui.item.value: " + ui.item.value); 
     } else { 
      alert("ui.item.value is null"); 
     } 
     console.log("this.value: " + this.value); 
    } 
}); 

chí này có thể thực hiện cả hai lựa chọn và thay đổi sự kiện cho autocomplete.

bạn cũng có thể kiểm tra fiddle http://jsfiddle.net/74wLyd8v/