Estou com dificuldades em adaptar [este][1] exemplo de autocomplete à minha tabela. Pretendo colocar o autocomplete na célula da designação. O que se passa é o seguinte: **HTML TABLE** <table class="table table-striped table-bordered" id="vendaTabela" width="100%" > <thead> <tr> <th data-class="expand">Cód.</th> <th data-hide="phone">Designação</th> <th data-hide="phone">Qnt.</th> <th data-hide="phone,tablet">Uni.</th> <th>Preço</th> <th>Desconto</th> <th>IVA</th> <th>Sub-Total</th> <th></th> </tr> </thead> <tbody> <tr id="tr0"> <td class="codigo" contenteditable="true" onblur="codArtigo ( )"></td> <td id="tags" class="designacao" contenteditable="true" onblur="nomeArtigo()"></td> <td class="quantidade" contenteditable="true" onblur="subtotal ( )"></td> <td class="unidade" contenteditable="false"></td> <td class="preco" contenteditable="true"></td> <td class="desconto" contenteditable="true"></td> <td class="iva" contenteditable="false"></td> <td class="total" contenteditable="false"></td> </tr> </tbody> </table> **JAVASCRIPT** var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC" ]; $( "#tags" ).autocomplete({ source: availableTags }); Até aqui tudo bem a questão é que ao colocar o 'id="tags"' no 'td' da designação, estraga-me o layout da tabela: ![inserir a descrição da imagem aqui][2] Faz-me ali um género de colapsan da designação com a quantidade. Alguém sabe o que poderá ser? **EDIT** Ao inspecionar elemento, ele está a adicionar um <span>: ![inserir a descrição da imagem aqui][3] Há maneira de "fugir" a isso ? [1]: http://jqueryui.com/autocomplete/ [2]: https://i.sstatic.net/1XKpO.jpg [3]: https://i.sstatic.net/pvUkY.jpg