[JS/CSS] Meerdere 'suggest' inputs, dynamisch

[Verwijderd]

Ik ben bezig met een webapplicatie met zeer veel zoekmogelijkheden. Om snel te kunnen zoeken lijkt mij een autoaanvul functie als die van Google Suggest ( link ) ideaal. De bedoeling is om elk tekst veld met een bepaalde class dynamisch een dergelijke zoekfunctie mee te geven, zo non obtrusive mogelijk (dus het liefst niets meer dan alleen die class name in mijn html).
Mijn oplossing is om met Javascript door alle input elementen te stappen, de classname te herkennen, en aan die specifieke elementen de suggest logica te hangen. Ik zit nu alleen met een klein probleempje wat betreft het resultaten veld.
Hoe kan ik dynamisch een resultaten div mooi onder de <input> genereren, zonder hem van te voren in de html te zetten? Het veld genereren is makkelijk met wat DOM werk, maar hoe krijg ik hem op de goede plaats (dus ná de input)? En welke css moet ik gebruiken om te bereiken wat ik wil? Het probleem is voornamelijk dat het resultaten veld geen child van de <input> kan zijn, en ik het liefst ook geen gebruik wil maken van container divs om elke input heen.

Even een voorbeeldje van wat ik wil:
Origineel:

HTML:

<form>
<input type="text" class="autoFill" value="bla"><br><br>
<input type="text">
</form>

En dit moet met DOM en CSS gegenereerd worden:

[T-MOB]

Je kunt hem inserten in de DOM na het input element, zoiets zou moeten werken:

JavaScript:

function insertAfter(newNode, node) {
  if (node.nextSibling) {
      node.parentNode.insertBefore(newNode,node.nextSibling);
  } else {
      node.parentNode.appendChild(newNode);
  }
}