There are tons of options out there for doing autocompletion. Most of them seem to work on the first few letters that are typed.
In Google Plus, an autocomplete option drops down soon after typing @
, no matter where it occurs in the form field, and uses the letters immediately following @
to guide the autocomplete. (It also looks quite nice!)
Has anybody shared code to do this sort of thing?
Does anybody have any pointers for trying to implement a toy version of this (e.g. in jQuery)?
This is possible with jQueryUI's autocomplete widget. Specifically, you can adapt this demo to satisfy your requirement. Here's an example:
function split(val) {
return val.split(/@\s*/);
}
function extractLast(term) {
return split(term).pop();
}
var availableTags = [ ... ]; // Your local data source.
$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function(request, response) {
var term = request.term,
results = [];
if (term.indexOf("@") >= 0) {
term = extractLast(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(
availableTags, term);
}
}
response(results);
},
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;
}
});
And here it is working: http://jsfiddle.net/UdUrk/
Let me know if you need any more information (such as how to make it work with a remote datasource).
Update: Here's an example using a remote datasource (StackOverflow's API): http://jsfiddle.net/LHNky/. It also includes custom display of autocomplete suggestions.
I wrote a jQuery plugin based on the jQuery UI autocomplete functionality. Here is my solution:
http://www.hawkee.com/snippet/9391/
You call it like this:
$('#inputbox').triggeredAutocomplete({
hidden: '#hidden_inputbox',
source: "/search.php",
trigger: "@"
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With