StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>That can be achieved real easily by listening <a href="http://jqueryui.com/demos/autocomplete/#multiple" rel="nofollow noreferrer">events</a>. You could make the color red for example by <a href="http://api.jquery.com/addClass/" rel="nofollow noreferrer">adding class</a> and removing class to autocomplete. I think you can accomplish this yourself with a little bit of effort.</p> <pre><code>select: function( event, ui ) { var terms = split( this.value ); if(terms.length <= 2) { // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } else { var last = terms.pop(); $(this).val(this.value.substr(0, this.value.length - last.length - 2)); // removes text from input $(this).effect("highlight", {}, 1000); $(this).addClass("red"); $("#warnings").html("<span style='color:red;'>Max people reached</span>"); return false; } } </code></pre> <p>P.S I also think one of these plugins could be suitable thanks to <a href="http://www.google.nl/#hl=en&q=facebook+autocomplete+jquery" rel="nofollow noreferrer">google</a>:</p> <hr> <ol> <li><p><a href="https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin" rel="nofollow noreferrer">https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin</a></p> <p>Looks nice in my opinion:</p> <p><img src="https://i.stack.imgur.com/si5Ns.png" alt="Demo tokenizing Autocomplete Plugin"></p> <p>Click link to view <a href="http://loopj.com/tokeninput/demo.html" rel="nofollow noreferrer">live demo</a>.</p></li> <li><p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/" rel="nofollow noreferrer">http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/</a></p></li> <li><a href="https://stackoverflow.com/questions/1191807/facebook-style-jquery-autocomplete-plugin">Facebook style JQuery autocomplete plugin</a></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload