Jquery UI autocompletar y complemento de etiqueta (XOXCO) problema de fusión

Question

He estado usando el autocompletado de jquery por un tiempo sin problemas hasta ahora. Quiero crear un sistema de etiquetas (como el de stackoverflow).

Para ello estoy usando dos plugins:

• jQuery UI (http://jqueryui.com/demos/autocomplete/)
• Xoxco (http://xoxco.com/proyectos/código/tagsinput /)

tengo que correr y trabajar utilizando este código:

$('#related_tags').tagsInput({ 
    autocomplete_url : 'live_search.php', 
    autocomplete : { 
      minLength: 3, 
      delay: 150, 
      //DATA AS OPTION?? 
    }, 
    'height':'30px', 
    'width':'auto', 
    'removeWithBackspace' : true, 
    'minChars' : 3, 
    'maxChars' : 200, 
    'placeholderColor' : '#666666' 
}); 

Sin embargo, tengo que cambiar la forma en LiveSearch muestra los datos que se encuentran (de modo que no sólo se visualiza la etiqueta). Si no está utilizando estos dos plugins juntos (decir que acaba de utilizar autocompletar) es fácil, que acaba de hacer algo como esto:

$("#related_tags").autocomplete({ 
     source: 'live_search.php', 
     minLength: 3, 
     delay: 150 
}) 
.data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a href='item.php'>" + item.label + " " + item.surname + "<span style='color:#003399;'>" + item.p_name + "</span></a>") 
      .appendTo(ul); 
}; 

Como se puede ver, no estoy mostrando simplemente la etiqueta del artículo, yo también soy mostrando el apellido y el nombre p.

Así que mi pregunta es:

---

¿Cómo se utiliza la función de representación de datos cuando el Mergin autocompletar y las etiquetas plugins juntos?

---

ya que creo que los datos no está disponible como una opción de autocompletar no puedo simplemente empuje hacia arriba tere. ¿Algunas ideas?

P.S: Si usted sabe cómo hacerlo utilizando un complemento diferente de xoxco, por favor dígame de todos modos. ¡Gracias!

Answer 1

El plugin funciona con una especie de entrada oculta a la que el plugin conectar el autocompletar jQuery.

Así que simplemente tiene que anular el _renderItem en ese campo de entrada, como lo haría con una simple entrada de autocompletar.

DEMO

---

Así que si se aplica el plugin tagsInput a la siguiente entrada (a partir del ejemplo de plug-in de la página web):

<input name="tags" id="tags" value="foo,bar,baz" />​ 

$('#tags').tagsInput({ 
    autocomplete_url: 'some url' 
}); 

Usted final con la siguiente generada marcado:

<input name="tags" id="tags" value="foo,bar,baz" style="display: none; "> 
<div id="tags_tagsinput" class="tagsinput" style="width: 300px; height: 100px; "> 
    <span class="tag"><span>foo&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>bar&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>baz&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><div id="tags_addTag"> 

    <input id="tags_tag" value="" data-default="add a tag" style="color: rgb(102, 102, 102); width: 80px; " class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></div> 

    <div class="tags_clear"></div> 
</div> 

Véase el campo de entrada tags_tag. Este es el elemento al que está conectado el complemento Autocompletar. A continuación, puede simplemente anular el _renderItem:

$('#tags_tag') 
    .data('autocomplete') 
    ._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a href='item.php'>" + item.someProperty + "</a>") 
      .appendTo(ul); 
};​