How to do autocomplete in textarea? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How to do autocomplete in textarea?

Please give me solution with code 🙏😊🎉

21st Feb 2020, 2:54 AM
Bibek
Bibek - avatar
40 Answers
21st Feb 2020, 3:02 AM
Pedro H.J
Pedro H.J - avatar
+ 5
You have the entire example page in their github code https://github.com/zurb/tribute/blob/master/example/index.html edit: i've played around with it for a bit and it's rather easy setup i've used js and css from this cdn: https://cdnjs.com/libraries/tributejs and the example from their page i'm hoping you will attempt to set it up on your own
22nd Feb 2020, 8:54 AM
Burey
Burey - avatar
+ 4
Can you show us your attempt? Also, autocomplete uses artificial intelligence, which is quite advanced for someone to explain it is one simple code.. unless you want to use external libraries of course.
21st Feb 2020, 2:59 AM
Aymane Boukrouh
Aymane Boukrouh - avatar
+ 4
Gordon I don't think that's what he meant. He probably wants the autocomplete feature, like the one google uses, and your phone uses.
21st Feb 2020, 3:26 AM
Aymane Boukrouh
Aymane Boukrouh - avatar
+ 4
You mean something like this @mention lib? https://github.com/zurb/tribute demo: https://zurb.github.io/tribute/example/
21st Feb 2020, 12:52 PM
Burey
Burey - avatar
+ 3
datalist
21st Feb 2020, 3:20 AM
Gordon
Gordon - avatar
+ 3
I wanted to do it on textarea sry not on input box
21st Feb 2020, 3:26 AM
Bibek
Bibek - avatar
+ 3
A simple example: var suggests = ["hello", "world"]; $("#text-area1").asuggest(suggests); This will match things easily, no limits, no minimum character count. More bells and whistles: var suggests = ["head", "hello", "heart", "health"]; $("#text-area1").asuggest(suggests, { 'endingSymbols': ', ', 'minChunkSize': 3, 'delimiters': ':', 'stopSuggestionKeys': [$.asuggestKeys.RETURN] }); This would require a three (or more) character to start matching, as well as requiring the string to begin with the characater :, place a comma , after each completion, and stop bugging you after you hit the RETURN key. With some tab-cycling, to be discrete: var suggests = ["head", "hello", "heart", "health", "horizontal"]; $("#text-area1").asuggest(suggests, { 'autoComplete': false, 'cycleOnTab': true }); This won't offer up suggestions, but will cycle through the matches when the user hits their TAB key.
22nd Feb 2020, 10:03 AM
Venugopal Kousik Ambatipudi
Venugopal Kousik Ambatipudi - avatar
+ 2
We are here to learn, don't expect to get complete solution without trying, especially for more custom feature. However you could take my code, further modify it to become your custom feature you need. Since the code already done the autocomplete part, you would need to think about it, how to make this autocomplete reoccur at the end of the string on textarea.
21st Feb 2020, 5:48 AM
Calviղ
Calviղ - avatar
+ 2
The textarea element also accepts several attributes common to form inputs, such as autocomplete , autofocus , disabled , placeholder , readonly , and required.In HTML, there are various attributes such as action, accept, autocomplete, accept-charset, encrypt, method, name, target and novalidate. Explanation: Out of all the given attributes, two have been described below: 1. Autocomplete- It has an on/off mode and specifies whether particular fields in the given form should be autofilled or not. 2. Novalidate- specifies that validation of the form details is not necessary while submission. program:- #include <stdio.h> #include sys::pass int main(){ string ip; sys.pass.find = ip; printf("%s"ip); //Done!!! }
8th Mar 2020, 5:32 AM
Venugopal Kousik Ambatipudi
Venugopal Kousik Ambatipudi - avatar
+ 2
function autocomplete(inp, arr){   /*execute a function when someone writes in the text field:*/   inp.addEventListener("input", function(e) {       var a, b, i, val = this.value;       /*close any already open lists of autocompleted values*/       closeAllLists();       if (!val) { return false;}       currentFocus = -1;       /*create a DIV element that will contain the items (values):*/       a = document.createElement("DIV");       a.setAttribute("id", this.id + "autocomplete-list");       a.setAttribute("class", "autocomplete-items");       /*append the DIV element as a child of the autocomplete container:*/       this.parentNode.appendChild(a);       /*for each item in the array...*/       for (i = 0; i < arr.length; i++) {         /*check if the item starts with the same letters as the text field value:*/         if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {   
10th Mar 2020, 6:32 AM
Venugopal Kousik Ambatipudi
Venugopal Kousik Ambatipudi - avatar
+ 1
No help it doesn't work
21st Feb 2020, 3:17 AM
Bibek
Bibek - avatar
+ 1
No help too it still doesn't work
21st Feb 2020, 3:23 AM
Bibek
Bibek - avatar
+ 1
Bibek your question is not very clear tho, what do you want exactly? There are different types of autocomplete, it depends on what you want to achieve.
21st Feb 2020, 3:35 AM
Aymane Boukrouh
Aymane Boukrouh - avatar
+ 1
Bibek I think saying "autocomplete suggestions" would fit better in this case.
21st Feb 2020, 3:43 AM
Aymane Boukrouh
Aymane Boukrouh - avatar
+ 1
Did you see the codes above ? Why textarea instead input ?
21st Feb 2020, 3:45 AM
Pedro H.J
Pedro H.J - avatar
21st Feb 2020, 4:54 AM
Calviղ
Calviղ - avatar
+ 1
This SO thread contains interesting things https://stackoverflow.com/questions/349155/how-do-autocomplete-suggestions-work EDIT: Most of the answers refers to AJAX, but you don't need to actually do so
21st Feb 2020, 1:30 PM
Seniru
Seniru - avatar