jQuery Girl
  1. jQuery Girl
  3. Activer l’événement select sur click pour la saisie semi-automatique jQuery
Intereting Posts
Paramètres de passage de AJAX POST au contrôleur Grails Exporter une table HTML pour excel dans asp.net MVC2 jQuery – Comment se fondre / disparaître d’une couleur à l’autre? (Possible plugin tiers pour jQuery?) : remote => true ne fonctionne pas lorsqu’un uploader de fichier est utilisé dans un formulaire Comment masquer les images jusqu’à ce que jQuery flexslider ait fini de se charger Javascript – Créer une arborescence à trois niveaux, deux boîtes de sélection de colonnes – HTML Problèmes d’index Z avec IE6 et l’élément HTML Comment connecter des divs HTML avec des lignes? jQuery rechercher et remplacer par des tableaux de valeurs clés Accéder aux propriétés de l’object local à partir de la fonction interne (Javascript) Soustraction de valeurs sur keyup à l’aide de jquery KnockoutJS Groupe sortingable observableArray par champ et sortinger de manière conditionnelle Backbone.js on (), à quoi se réfère le dernier? Déclenchez un clic avec jQuery à l’aide de link_to des rails 4 Comment gérer les espaces de noms XML dans les sélecteurs CSS ou dans jQuery?

Activer l’événement select sur click pour la saisie semi-automatique jQuery

Après avoir joué un peu avec la fonctionnalité de saisie semi-automatique de jQuery, je n’ai pas pu activer l’événement select à se déclencher. Ce qui est étrange car l’événement onfocus est déclenché lorsque la souris est déplacée sur chaque élément de la liste. D’après ce que j’ai essayé jusqu’à présent, il ne semble pas y avoir de moyen intégré pour que l’événement select soit déclenché lors d’un clic. Est-ce que je manque quelque chose? Ou y a-t-il une autre façon dont les gens ont traité cela par le passé?

Merci d’avance, Brandon

L’événement sélectionné doit se déclencher automatiquement au clic. Considérez le bloc de code suivant. Ici, je passe à un ensemble de gestionnaires pour décider d’éléments, tels que l’URL à utiliser, l’étiquette à laquelle attacher le comportement de complétion automatique, etc. En fin de compte, faire une demande ajax pour remplir la liste de complétion automatique. 

ActivateInputFieldSearch: function (callBack, fieldID, urlHandler, labelHandler, valueHandler) { $("#" + fieldID).autocomplete({ source: function (request, response) { var requestUrl; if (_.isFunction(urlHandler)) { requestUrl = urlHandler(request); } else { requestUrl = urlHandler; } $.ajax({ url: requestUrl, dataType: "json", data: { maxRows: 10, searchParameter: request.term }, success: function (data) { response($.map(data, function (item) { var dataJson = $.parseJSON(item); return { label: labelHandler(dataJson), value: valueHandler(dataJson), data: dataJson }; })); } }); }, minLength: 0, select: function (event, ui) { if (callBack) { callBack(ui.item); } }, open: function () { $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); }, close: function () { $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); }, focus: function (event, ui) { $("#" + fieldID).val(ui.item.value); } }); }

J’avais un problème similaire. J’essayais d’utiliser un autocomplete sur 3 zones de texte. Si l’utilisateur commence à taper dans l’une des trois zones de texte, un appel ajax sera déclenché et renverra toutes les combinaisons distinctes de ces zones dans la firebase database en fonction de ce qui a été saisi.

La partie importante de ce que j’essaie de dire est que j’ai eu le problème du “clic de souris sans complétion automatique”. J’ai eu une fonction en tirant on select pour définir les valeurs pour toutes les zones de texte. C’était quelque chose comme ça: 

 function showAutocompleteDropDown( a_options ){ console.log('options: ' + a_options); if ( a_options == "" ){ // nothing to do return; }// if // find out which text box the user is typing in and put the drop down of choices underneath it try{ // run jquery autocomplete with results from ajax call $(document.activeElement).autocomplete({ source: eval(a_options), select: function(event, ui){ console.log( 'event: ' + event.type ); console.log( ' running select ' ); // set the value of the currently focused text box to the correct value if (event.type == "autocompleteselect"){ console.log( "logged correctly: " + ui.item.value ); ui.item.value = fillRequestedByInformation( ); } else{ console.log( "INCORRECT" ); } }// select }); } catch(e){ alert( e ); }// try / catch }// showAutocompleteDropDown() function fillRequestedByInformation( ){ // split the values apart in the name atsortingbute of the selected option and put the values in the appropriate areas var requestedByValues = $(document.activeElement).val().split(" || "); var retVal = $(document.activeElement).val(); $(document.activeElement).val(""); var currentlyFocusedID = $(document.activeElement).attr("id"); console.log( 'requestedByValues: ' + requestedByValues ); console.log( 'requestedByValues.length: ' + requestedByValues.length ); for (index = 0; index < requestedByValues.length; index++ ){ console.log( "requestedByValues[" + index + "]: " + requestedByValues[index] ); switch ( index ){ case 0: if ( currentlyFocusedID == "RequestedBy" ){ retVal = requestedByValues[index]; } $('#RequestedBy').val(requestedByValues[index]); break; case 1: if ( currentlyFocusedID == "RequestedByEmail" ){ retVal = requestedByValues[index]; } $('#RequestedByEmail').val(requestedByValues[index]); break; case 2: if ( currentlyFocusedID == "RequestedByPhone" ){ retVal = requestedByValues[index]; } $('#RequestedByPhone').val(requestedByValues[index]); break; default: break; } } }// fillRequestedByInformation()

et puis je l'ai changé comme suit: 

 function showAutocompleteDropDown( a_options ){ console.log('options: ' + a_options); if ( a_options == "" ){ // nothing to do return; }// if // find out which text box the user is typing in and put the drop down of choices underneath it try{ // run jQuery autocomplete with results from ajax call $(document.activeElement).autocomplete({ source: eval(a_options), select: function(event, ui){ console.log( 'event: ' + event.type ); console.log( ' running select ' ); // set the value of the currently focused text box to the correct value if (event.type == "autocompleteselect"){ console.log( "logged correctly: " + ui.item.value ); ui.item.value = fillRequestedByInformation( ui.item.value ); } else{ console.log( "INCORRECT" ); } }// select }); } catch(e){ alert( e ); }// try / catch }// showAutocompleteDropDown() function fillRequestedByInformation( a_requestedByValues ){ // split the values apart in the name atsortingbute of the selected option and put the values in the appropriate areas var requestedByValues = a_requestedByValues.split(" || "); var retVal = $(document.activeElement).val(); $(document.activeElement).val(""); var currentlyFocusedID = $(document.activeElement).attr("id"); console.log( 'requestedByValues: ' + requestedByValues ); console.log( 'requestedByValues.length: ' + requestedByValues.length ); for (index = 0; index < requestedByValues.length; index++ ){ console.log( "requestedByValues[" + index + "]: " + requestedByValues[index] ); switch ( index ){ case 0: if ( currentlyFocusedID == "RequestedBy" ){ retVal = requestedByValues[index]; } $('#RequestedBy').val(requestedByValues[index]); break; case 1: if ( currentlyFocusedID == "RequestedByEmail" ){ retVal = requestedByValues[index]; } $('#RequestedByEmail').val(requestedByValues[index]); break; case 2: if ( currentlyFocusedID == "RequestedByPhone" ){ retVal = requestedByValues[index]; } $('#RequestedByPhone').val(requestedByValues[index]); break; default: break; } } }// fillRequestedByInformation()

Le débogage est toujours là pour l'instant, mais la modification était dans l'événement select de la saisie semi-automatique en ajoutant un paramètre à la fonction fillRequestedByInformation() et à la première ligne de cette fonction. Il renvoie et remplace ui.item.value pour obtenir la valeur correcte pour cette zone au lieu de la valeur sélectionnée.

Exemple de valeur de saisie semi-automatique sélectionnée: 

 "John Doe || [email protected] || 1-222-123-1234"

De plus, utilisez eval( a_options ) pour que l'auto-complétion puisse utiliser a_options. avant d’utiliser eval , il ne reconnaît même pas que j’ai des valeurs dans la source. a_options est le résultat.

Je pense que vous avez besoin de l’événement select 

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

http://jqueryui.com/demos/autocomplete/#event-select