自动完成后触发 Onchange 事件答案

【问题标题】：Fire Onchange event after AutoComplete自动完成后触发 Onchange 事件
【发布时间】：2012-11-16 02:12:51
【问题描述】：

我正在尝试一次执行 Autocomplete 和 onchange 事件。

意思是：我想在自动完成文本框中触发 onchange 事件。当我从键盘在文本框中写入内容并在文本框外部单击时，onchange 事件会触发，但是当我从自动建议名称中选择某些内容时，onchange 事件不会触发。

我的 HTML 代码

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

JavaScript 代码

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);
}

我想在从自动完成中选择后触发 onchange 事件。

请帮忙

提前致谢。

【问题讨论】：

标签： jquery html autocomplete onchange

【解决方案1】：

您可以使用自动完成小部件上的更改事件来实现此目的。 http://api.jqueryui.com/autocomplete/#event-change

例如：

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

【讨论】：

我想在选择后触发 onchange 事件。
这种情况下可以使用select事件：api.jqueryui.com/autocomplete/#event-select。
一个查询我将如何获得 txtbox id？

【解决方案2】：

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

这将执行自动完成的选择和更改事件。

你也可以检查小提琴http://jsfiddle.net/74wLyd8v/

【讨论】：

【解决方案3】：

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

这将触发“更改”事件

【讨论】：

自动不会去更改事件？？
两个答案都帮助了我谢谢

【解决方案4】：

KDRVN 是正确的。

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

如

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

不是这些：

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

【讨论】：