javascript - Emulate SO tag editor -

I am trying to implement a 'tag editor' field in my app, just like the SA does now I found it:

Edit: I've coded it in jQuery plugin:

Bela

html

  & lt; Div style = "margin-left: auto; margin-right: automatic, width: 400px;" & Gt; & Lt; Span style = 'color: # 333; Font-size: small '& gt; Tag [a-z A-Z 0-9 # + -] & lt; / Span & gt; & Lt; Div id = 'tags_container' & gt; & Lt; Span id = 'tags_queue' & gt; & Lt; / Span & gt; & Lt; Input type = 'text' id = 'tf' / & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 js  
  $ (document) .ready (function () {var rexp = / [^ a-zA-Z0-9 # + \. Variant = 32; var comma = 188; var minnal = 3; var max allan = 15; var current_tag = null $ ('# tf'); / var left = 37; var right = 39; var delz = 8; Focus (). Etter ('MacTallanth', MaxLen) $ ('# tag_container'). Click (function () {$ ('# tf)) Focus ()}) $ (' # TF '). Function (e) {var code = e.ccode? E. Kikode: E. that? E. Joe: E.Corcode; Var txt = $ (this) .val (). The handle between navigation between the trim () // tag is ((code === left || code === true) & amp; amp; txt.length === 0) {if (! Current_tag) {if (code === left) current_tag = $ ('# tags_queue span' '') '' '' '' '' current '' (= '' tag 'tag exists {if (code === left) current_tag = current_tag.css ('Background-color', '# B8D0DE') prev () else current_tag = current_tag.css ('background-color', '# B8D0DE') .next () if (current_tag.length & gt; 0) Current_tag.css ('Background-color', '# 9F2D6') // hit previous / first, clean current_tag else {current_tag.css ('background-color', '# B8D0DE') current_tag = null}}}}) ; $ ('# TF') .press (function (e) {var token = String.fromCharCode (e.which) var code = e.keyCode? E. Kikode: e.whi Ch? E.which: e.charCode; if (token match (rexp) & amp; (code! == Dell) & amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; ; Code; == true) Returned;}}; $ ('# TF') .keyp (function (e) {var code = E.Code? E. K. Code: E.H.E.E.E.E. .EEH: E.Corcode; Veer TXT = $ (this) .val () trim () if (code === Dell & amp; Amp; Txt.length === 0 & amp; Current_tag) {current_tag.remove () current_tag = null return} // clean current_tag, if the user is typing (current_tag & amp;; & amp;; Amp; (code! == left) & amp; amp; (code! = True)) {Current_tag.css ('background-color', '# B8D0DE') current_tag = null} if (txt.length & gt; maxlen) txt = txt.substring (0, maxlen) if (txt.match (rexp)) { - $ (this) .val ("") returns} and if (code === space || code === comma) {If (txt.length & lt; minlen) return; Var tag = $ ('& lt; span & gt; & lt; / span & gt;', {'class': 'tag'}). Html (txt) .append ($ ('  
})  
 css  
  div # tags_container {border: 1px solid #ccc; Padding-down: 5px; Boundary-radius: 5px; Background color: beige; Hidden flurry; } Input # TF {Border: 1 px solid orange! Important; Profile: None! Important; Background color: Transparent! Important; Height: 30px; Margin-top: 2px; Padding-left: 5px; } A.close_tag {margin-left: 5px; Color: #fff; } A.close_tag: hover {cursor: pointer; } Span.tag {background color: # B8D0DE; Color: # 111; Margin-left: 5px; Margin-top: 5px; Padding: 5px; Swim left; Boundary-radius: 5px; } Span.tag: hover {background-color: # 9FC2D6; } Period # tag_ue {margin-right: 5px; Vertical-row: middle; }   
 The problem is, how can I handle 'hidden' content using the arrow keys, the way it does so? It seems that I have to handle the cursor position within the text-field, and the clock-to-right and arrow-right events ... and click on the whole tag too.  
 I can think the following (anti-SO design) solution:  
 
 
   white-space: nowrap   add   tag_container   div, and div add more tags as 'grow'.  
 
 Add   overflow:   tag_container   div (very ugly!)   < / Code>    
 So, how would I appreciate any new ideas?  Estimated  thanks to SO Tag-Editor behavior!   
 
 
 Changing the wheel again is a bad practice: take a look at the excellent jQuery plugin code, Implements the stuff you are working on.