web-dev-qa-db-fra.com

Obtenir la valeur sélectionnée dans jquery autocomplete on blur function

Je souhaite disposer d'une fonctionnalité de complétion automatique, dans laquelle la zone de texte doit être renseignée avec la liste de valeurs en tant que premier élément en cas d'événement de flou.

Je voudrais avoir la même fonctionnalité que celle implémentée dans ce lien lien

enter image description here

J'ai le code ci-dessous, qui remplit l'onglet et la clé, mais je ne sais pas comment obtenir la même fonctionnalité lors d'un événement de flou.

$( "#statelist" ).autocomplete({
    autoFocus: true,
    source: states,
    select: function (event, ui) {
        stateid = (ui.item.lable);
        $("#stateid").val(stateid);
    }
});

EDIT: - L'utilisateur entre un texte nous permet de taper "che" et, sans appuyer sur la touche de tabulation ni la touche de saisie, l'utilisateur déplace son contrôle sur la zone de texte suivante. Dans ce scénario, je souhaite que le premier élément de la liste soit automatiquement rempli dans la zone de texte. . 

jqueryhtml5css3autocomplete
10
pappu_kutty

Vous pouvez envoyer une touche Entrée lors d'un événement de flou.

     $( "#statelist" ).blur(function(){
         var keyEvent = $.Event("keydown");
         keyEvent.keyCode = $.ui.keyCode.ENTER;
         $(this).trigger(keyEvent);
     }).autocomplete({
         autoFocus: true,
         source: states,
         // ...
     });

Voici le violon: http://jsfiddle.net/trSdL/4/

Et voici une question similaire. https://stackoverflow.com/a/15466735/1670643

10
andyf

Ceci est le travail DÉMO

Utilisez autoFocus: true option disponible pour la saisie semi-automatique, puis placez le premier résultat obtenu dans votre zone de saisie de l'événement blur, simple.

JS:

$("#tags").autocomplete({
    source: availableTags,
    autoFocus: true,
    selectFirst: true,
    open: function(event, ui) { if(select) select=false; },
    select: function(event, ui) { select=true; }
}).blur(function(){
    if(!select)
    {
        $("#tags").val($('ul.ui-autocomplete li:first a').text());
    }
});

Si vous avez deux autocomplete: Fiddle

Si vous avez des données de tableau associatif: Par exemple:

var availableTags = [
    {'label': 'dog', 'value':1},
    { 'label' : 'cat' , 'value':2} ,
    {'label': 'ant', 'value':3},
    {'label': 'bat', 'value':4},
    {'label': 'deer', 'value':5},
    {'label': 'elephant', 'value':6},
    {'label': 'frog', 'value':7},
    {'label': 'giraffe', 'value':8},
    {'label': 'snake', 'value':9}
 ];

Utilisation:

ui.item.label donne l'étiquette, ui.item.value donne la valeur correspondante: DEMO

select: function(event, ui) {
        $('#tags').val(ui.item.label); //shows label in autocomplete
        select=true;
        return false;
    }

Vous pouvez également accéder à data.autocomplete.selectedItem dans votre événement change de saisie semi-automatique pour obtenir l'objet de saisie semi-automatique sélectionné, Voir ici 

 change:function(event,ui){  
    if(!select)
    {
       $('ul.ui-autocomplete li:first a').trigger('click');
    }
    var data=$.data(this);//Get plugin data for 'this'
    console.log(data.autocomplete.selectedItem);
}
5
Aditya

Je pense que vous manquez

change: function( event, ui ) {}

http://api.jqueryui.com/autocomplete/

* non testé

$( "#statelist" ).autocomplete({
                            change: function( event, ui ) {}
                            autoFocus: true,
                            source: states,
                            select: function (event, ui) {
                                    stateid = (ui.item.lable);
                                    $("#stateid").val(stateid);
                           },
                        }
   });
3
JBC

ici, je vous laisse une fonction travaillant déjà pour ce que vous avez besoin d'obtenir la valeur sur le flou

Je colle une partie du code ici

$( "#tags" ).autocomplete({
    source: availableTags,
    open: function(event, ui) { disable=true; },
    close: function(event, ui) { 
        disable=false; $(this).focus(); }
}).blur(function(){
    if(!disable){
        alert($(this).val());
    }
});

JsFiddle DEMO

2
alecellis1985

Cochez cette Fiddle .. Cela pourrait vous aider ...

Script 

$( "#from" ).autocomplete({
    source: fromCity,
    select: function(event, ui) { 
        $( "#from" ).blur();        
        $( "#to" ).focus();
    }
});   
$( "#to" ).autocomplete({
    source: toCity
});
2
Soundar

S'il vous plaît essayez ceci. Il devrait fonctionner pour vous:

$('#statelist').autocomplete({
source: states,
autoFocus: true,
selectFirst: true,

open: function(event, ui) { if(select) select=false; },
    select: function(event, ui) { select=true; },

})

.live("blur", function(event) {
var get_val = $('ul.ui-autocomplete li:first a').text();

$('#stateid').val(get_val);
});
1
Neeraj Kumar

Solution testée Cela forcera le choix du premier élément s'il n'y en a pas liste des articles

Essayez ceci http://jsfiddle.net/killwithme/ke8osq27/

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
   "BASIC",
   "C",
   "C++",
];

$("#tags").autocomplete({
    source: availableTags,
    autoFocus: true,
    selectFirst: true,
    select: function(event, ui) {
        $("#tags").val(ui.item.value);
        $("#tags-span").text(ui.item.value);
    }
}).on('autocompletechange', function() {
    if ($(this).data('ui-autocomplete').selectedItem === null) {
    //this will trigger your select automatically so it will handle other custom override you did for select
        $(this).data('ui-autocomplete').menu.element.children('li:first').children('a').trigger('click');
    }
});
1
Gangwar Ramakant

Plusieurs compléments automatiques utilisant la réponse @Aditya. Après quelques recherches, le mieux que j'ai trouvé a été d'appliquer des classes à la méthode open du menu déroulant et de les utiliser pour faire correspondre le menu déroulant de droite.

Fiddle: http://jsfiddle.net/ac1fkr5w/2/

Code: 

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "LISP",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];

var select = false;

$("#tags").autocomplete({
    source: availableTags,
    autoFocus: true,
    selectFirst: true,
    open: function(event, ui) {
    //Adding class
    $(this).data("uiAutocomplete").menu.element.addClass("tags");
    if(select) select=false; },
    select: function(event, ui) { select=true; }
}).blur(function(){
    if(!select)
    {
    //Using class to match the right ul
        $("#tags").val($('ul.tags li:first a').text());
    }
}); 


$("#tags2").autocomplete({
    source: availableTags,
    autoFocus: true,
    selectFirst: true,
    open: function(event, ui) {
    $(this).data("uiAutocomplete").menu.element.addClass("tags2");
    if(select) select=false;
    },
    select: function(event, ui) { select=true; }
}).blur(function(){
    if(!select)
    {
        $("#tags2").val($('ul.tags2 li:first a').text());
    }
});
0
user1667162

Pour résoudre le problème décrit par @pappu_kutty dans la section commentaire de la réponse marquée 

"@andyf cela fonctionne comme prévu, mais un problème que j'ai trouvé, disons que j'ai entré" a "et les éléments énumérés dans la liste déroulante, passe la souris sur la liste et s'éloigne de la liste. Dans ce cas, aucun des éléments sélectionnés et la complétion automatique ne fonctionne pas :) - pappu_kutty "

ajoutez le code ci-dessous pour compléter automatiquement l'événement change. Cela empêche fondamentalement tout choix non valide dans la zone de saisie semi-automatique.

change: function (event, ui) {
                if (ui.item == null) {
                    $(this).val('');
                    $(this).focus();
                    return;
                }
}
0
Ben M