Jquery UI autocomplete changement d'événement

Question

Bonjour, J'ai eu un problème avec l'événement de changement. Par documentation, il doit y avoir un objet ui.item

Après la sélection d'un élément; ui.item fait référence à l'élément sélectionné. Toujours déclenché après l'événement de fermeture.

Mais quand je l'essayer ui.item est indéfini :(Je veux unset s_town_id lorsque l'entrée saisie semi-automatique ne correspond pas avec les données de script.

<input id="s_town" type="text" name="s_town" /> 
<input type="text" id="s_town_id" name="s_town_id" /> 

 

    
$(function() { 
    $("#s_town").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
    url: "/_system/_ajax/uiautocomplete.php", 
    dataType: "json", 
    data: { 
     name: "s_town", 
     term: request.term 
    }, 
    success: function(data) { 
     response($.map(data, function(item) { 
     return { 
     label: item.whisper_name+ " [" + item.zip_code + "/" + item.lup_state + "]", 
     value: item.whisper_name, 
     id: item.whisper_id, 
     zip_code: item.zip_code, 
     lup_state: item.lup_state, 
     stateid: item.stateid 
     } 
     })) 
    } 
    }) 
    }, 
    minLength: 2, 
    select: function(event, ui) { 
    $("#s_town_id").val(ui.item.id); 
    }, 
    change: function(event, ui) 
    { 
    // ui.item is undefined :(where is the problem? 
    $("#s_town_id").val(ui.item.id); 
    } 

    }); 


}); 
    

 

Answer 1

je trouve une solution où Je teste event.originalEvent.type si elle est meneuselected ou non et après je manquai s_town_id unset. Mais une meilleure solution est encore Wellcome.

<input id="s_town" type="text" name="s_town" /> 
<input type="text" id="s_town_id" name="s_town_id" /> 

 

    
$(function() { 
    $("#s_town").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
    url: "/_system/_ajax/uiautocomplete.php", 
    dataType: "json", 
    data: { 
     name: "s_town", 
     term: request.term 
    }, 
    success: function(data) { 
     response($.map(data, function(item) { 
     return { 
     label: item.whisper_name+ " [" + item.zip_code + "/" + item.lup_state + "]", 
     value: item.whisper_name, 
     id: item.whisper_id, 
     zip_code: item.zip_code, 
     lup_state: item.lup_state, 
     stateid: item.stateid 
     } 
     })) 
    } 
    }) 
    }, 
    minLength: 2, 
    select: function(event, ui) { 
    $("#s_town_id").val(ui.item.id); 
    }, 
    change: function(event, ui) 
    { 
    try 
    { 
     if(event.originalEvent.type != "menuselected") 
     { 
      // Unset ID 
      $("#s_town_id").val(""); 
     } 
    } 
    catch(err){ 
     // unset ID 
     $("#s_town_id").val(""); 
    } 
    } 

    }); 


}); 
    

 

Answer 2

Si ui.item n'est pas défini, cela signifie que votre source json n'est pas bien formée. Vous devez envoyer une source JSON comme ceci:

[{"label":"Jean","value":1},{"label":"carl","value":2}] 

Vous pouvez ajouter plus clé au tableau, mais au moins vous devez définir « label » et « valeur ». Vérifiez la chaîne JSON. Aussi je vous compte d'utiliser la dernière version de l'autocomplétion 1.8.1 pour le moment