Ajouter un lien à un élément de saisie semi-automatique JQueryUI

Question

Lorsqu'un utilisateur commence à taper dans la zone de recherche, la page de suggestion renvoie le dernier élément de toutes les collections correspondant à ce nama, ainsi que d'autres données.

Je voudrais montrer cet élément (le long de son image), et un lien vers "voir tous les éléments de cette collection".

je peux le faire (la plupart) qui avec le code suivant:

$('#search').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: suggesturl, 
      dataType: 'json', 
      data: request, 
      success: function (data) { 
       response(data.map(function (value) { 
        return { 
         'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>', 
         'value': value.fullname 
        }; 
       })); 
      } 
     }); 
    }, 
    minLength: 3 
}) 

Le problème est que, bien que le lien apparaît dans la boîte, quand on clique dessus, il est ignorée, et l'action par défaut select est exécuté (le value de l'article est placé dans la zone de texte).

Answer 1

On dirait que vous avez quelques options. D'abord, vous pouvez spécifier votre propre action de sélection, en utilisant une option de sélection sur l'initialiseur de saisie semi-automatique.

$(selector).autocomplete({ 
    source: ... , 
    select: function(value, data){ 
      if (typeof data == "undefined") { 
       emitMessage('You selected: ' + value + "<br/>"); 
      } else { 
       emitMessage('You selected: ' + data.item.value + "<br/>"); 
      } 
    } 
}); 

Si cela ne suffit pas, pour une raison quelconque, vous pouvez rendre votre propre contenu pour la liste de saisie semi-automatique, et de cette façon obtenir autant de contrôle que vous avez besoin.
Vous faites cela en corrigeant le singe _renderItem fn, qui est ce que les appels de saisie semi-automatique rendent chaque élément de la liste. Vérifiez this answer pour savoir comment le faire. Cela fonctionne dans v1.8rc3.

Je suppose que dans _renderItem vous pouvez rendre un <span> cliquable, et attacher n'importe quelle logique que vous aimez à l'événement de clic.

Si vous suivez cette route, vous devrez peut-être désactiver l'action de clic par défaut. Je pense que l'autocomplétion utilise un <a> pour l'élément qui fournit l'événement click. Dans ce cas, vous devrez désactiver ce gestionnaire de clic.