web-dev-qa-db-fra.com

Événement Fire Onchange après la saisie semi-automatique

J'essaie de faire la saisie semi-automatique et l'événement onchange à la fois.

Signifie: Je veux déclencher un événement onchange dans une zone de texte à saisie semi-automatique. Lorsque j'écris quelque chose dans la zone de texte à partir du clavier et que je clique à l'extérieur de la zone de texte, le déclenchement de l'événement onchange, mais lorsque je sélectionne quelque chose dans l'événement de suggestion automatique de noms onchange ne se déclenche pas.

Mon code HTML

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

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

Je veux déclencher l'événement onchange après avoir sélectionné la saisie semi-automatique.

Veuillez aider

Merci d'avance.

jqueryhtmlautocompleteonchange
13
user1811989

Vous pouvez utiliser l'événement change sur le widget de saisie semi-automatique pour y parvenir. http://api.jqueryui.com/autocomplete/#event-change

Par exemple:

function AutoComplete() {
  //Autocomplete added to the textbox.
  $('.userSearch').autocomplete({
      source: function (request, response) {
         // your ajax code
      },
      minLength: 1,
      change: function (event, ui) { SaveData(); }
  });
}
11
kdrvn
$('#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);
    }
});

Cela peut effectuer à la fois la sélection et la modification de l'événement pour la saisie semi-automatique.

vous pouvez également vérifier le violon http://jsfiddle.net/74wLyd8v/

3
Pardeep Saini
$('.userSearch').trigger('change');

Cela déclenchera l'événement "change"

2
goFrendiAsgard

KDRVN est correct.

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

un péché

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

Aucun de ceux-ci:

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