This plugin is forked from Amir's original textarea autocomplete plugin found here: http://www.amirharel.com/2011/03/07/implementing-autocomplete-jquery-plugin-for-textarea/
The plugin has one function areacomplete which takes one argument with the following attributes:
wordCount {Number} The amount of words you want to get from the position of the cursor in order to match it
with your auto-complete list. usually this is set to 1.
mode {String} could be "inner" or "outter" where inner is the inline mode where the auto-complete display the
drop down list according to the cursot position. The outter mode works the same way as the
twitter auto-complete works - at the bottom of the textarea. As for now i don't support the
inner mode for IE - so the outter mode is set for IE. ( i can fix that but i don't have time.)
on {Object}
query {Function} will be called to query if there is any match for the user input. the function gets
two params: text and callback. the text is the number of words you requested, and the
callback should be called if you have anything to suggest to the text that was provided.
You need to call the callback by providing an array of strings that you suggest. In case
there is no match or no suggestion just call the callback with an empty array.
selection {Function} takes 2 paramters - a string value of the selected text and the data attached to the selection. May return a string to replace the selection.
You can also style the list as you like by setting your own styles in the auto.css file.
The plugin create a drop down menu to show the suggestion you have found for the current word that the user is typing. In order to style the to fits your needs, lets see the markup of the list:
<ul class="auto-list" style="left: 91px; top: 113px; display: none;">
<li data-value="daniel"><mark>d</mark>aniel</li>
<li data-value="david"><mark>d</mark>avid</li>
</ul>So as you can see from this example, i set the drop down list with a "auto-list" class name, so you can style it however you want. Here is the CSS i applied for the purpose of the demos:
ul.auto-list{
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 1px solid green;
background-color: #A3DF99;
padding: 0;
margin:0;
list-style:none;
}
ul.auto-list > li:hover,
ul.auto-list > li[data-selected=true]{
background-color: #236574;
}
ul.auto-list > li{
border: 1px solid gray;
cursor: default;
padding: 2px;
}
mark{
font-weight: bold;
}
Here's an example:
var urls = [
"facebook.com",
"google.com",
"twitter.com",
"amirharel.com",
"amazon.com",
"microsoft.com",
"quora.com",
"walla.co.il",
"ebay.com",
"gowala.com",
"myspace.com",
"youtube.com"
];
function initURLTextarea(){
$("#outter textarea").areacomplete({
wordCount:1,
mode: "outter",
on: {
query: function(text,cb){
var words = [];
for( var i=0; i<urls.length; i++ ){
if( urls[i].toLowerCase().indexOf(text.toLowerCase()) == 0 ) words.push(urls[i]);
}
cb(words);
},
selected: function(text, data)
{
return 'http://' + text;
}
}
});
}
var countries = [];
function initContriesTextarea(){
$.ajax("countries.txt",{
success: function(data, textStatus, jqXHR){
countries = data.replace(/\r/g, "" ).split("\n");
$("#contries textarea").areacomplete({
wordCount:1,
on: {
query: function(text,cb){
var words = [];
for( var i=0; i<countries.length; i++ ){
if( countries[i].toLowerCase().indexOf(text.toLowerCase()) == 0 ) words.push(countries[i]);
if( words.length > 5 ) break;
}
cb(words);
}
}
});
}
});
}
$(document).ready(function(){
initContriesTextarea();
initURLTextarea();
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent