Use Jquery UI autocomplete on each line of a text area

JavaScript
1

I am trying to use jquery ui’s autocomplete widget to autocomplete each line of a text area. I want the autocomplete to only function on the contents of a single line (whatever line the user’s cursor is on). How could I do this? I am not sure where to even start. It works fine on a single form input.

Adapting the example from jquery ui’s homepage:

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

$('#my-textarea-form-field).autocomplete({
	source: availableTags
});
2

[quote=“ShinVe, post:1, topic:233750, full:true”]
I am trying to use jquery ui’s autocomplete widget to autocomplete each line of a text area. I want the autocomplete to only function on the contents of a single line (whatever line the user’s cursor is on).[/quote]

Here’s a useful textarea autocomplete that should help: https://github.com/yuku-t/jquery-textcomplete

1 Like
3

That plugin was actually the first one I tried since it is so feature rich. Unfortunately, even after going through its docs, I did not find an example of autocomplete applying to each line of a text area, so I figured the jquery UI would be easier and maybe if I got that right I could just use what I learned there with that more complete yuku-t plugin. Like I said, I am not sure where to start to accomplish this.

The yuku-t plugin autocompletes anytime something comes up that matches a regex, so it can autocomplete multiple times per line - but I want at most once per line.

Here is what I tried:

(adapted from the example here: http://yuku-t.com/jquery-textcomplete/, the only change I made was to the match property to supply a new regex)

$('#my-textarea-form-field').textcomplete([
		{ // tech companies
			id: 'tech-companies',
			words: ['apple', 'google', 'facebook', 'github'],
			// match: /\b(\w{2,})$/, // original from demo
			match: /^(.*)$/, // did not work			
			search: function (term, callback) {
				callback($.map(this.words, function (word) {
					return word.indexOf(term) === 0 ? word : null;
				}));
			},
			index: 1,
			replace: function (word) {
				return word + ' ';
			}
		}
	], {
		onKeydown: function (e, commands) {
			if (e.ctrlKey && e.keyCode === 74) { // CTRL-J
				return commands.KEY_ENTER;
			}
		}
	});

I am not sure if a proper regex would actually be a solution. I also tried
/^\n(.*)$/ and /^(.*)\n$/
.

4

Any help on this or ideas on what to do would be appreciated!

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.