StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You could use this kind of snippet:</p> <p>{ I'm using here keyup event to check, but on modern browsers, you could use input (oninput) event instead or bind onpaste event too }</p> <p><a href="http://jsfiddle.net/q2SSF/">http://jsfiddle.net/q2SSF/</a></p> <pre><code> var availableTags = [ "Bird", "Son", "Happy"]; function split(val) { return val.split(/,\s*/); } function checkAvailable(term) { var length = term.length, chck = false, term = term.toLowerCase(); for (var i = 0, z = availableTags.length; i < z; i++) if (availableTags[i].substring(0, length).toLowerCase() === term) return true; return false; } function extractLast(term) { return split(term).pop(); } var $autocomplete = $("#autocomplete") // don't navigate away from the field on tab when selecting an item .on("keydown", function (event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) { event.preventDefault(); } }) .on("keyup", function (event) { var ac_value = this.value; if (!checkAvailable(extractLast(ac_value))) this.value = ac_value.substring(0, ac_value.length - 1); }) .autocomplete({ minLength: 0, source: function (request, response) { // delegate back to autocomplete, but extract the last term response($.ui.autocomplete.filter( availableTags, extractLast(request.term))); }, focus: function () { // prevent value inserted on focus return false; }, select: function (event, ui) { var terms = split(this.value); // 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; } }); </code></pre>

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