Question

Hey guys i want to use the jquery Autocomplete plugin and instead of separating the tags with , i want to format each tag like displayed in the attached picture.

Answer 1

Well, usually it’s not a real textbox. It’s a fake textbox that has a real, border-less, background-less text input that gets moved around inside a div-that-looks-like-a-textbox.

In the above screenshot, what you have is something like this:

  <div class="container">
     <ul class="tags">
       <li>java <span class="closer">x</span></li>
       <li>coldfusion <span class="closer">x</span></li>
     </ul>
     <input type="text" id="tagger"/>
  </div>

As you type in the text box, you have JS that auto-completes. When you select a tag (or hit a key like Tab or comma), it takes the current input in the box, creates a new LI, and sticks in the UL with a class of “tags” (ul.tags). The new LI looks like the tag above, and if you float the LIs next to each other, it pushes the textbox over inside the container div (which is styled to look like a textbox). The text input is actually there, just with no border or background, so it looks like it’s part of the container textbox.

That’s how I’ve done it in the past. I’m not going to write out all the code for you, but that should get you started. There are other examples of how to do this all over the web if you search correctly.

Hope that helps. Good luck.