Twitter autofill in the text box

Question

I am looking for a Javascript autocomplete implementation that includes the following:

• Can be used in HTML text box.
• Allows you to print plain text without calling autocomplete
• Detects the @ character and starts autocomplete when you type it
• Loads a list of options via AJAX

I find this to be similar to what Twitter does when tweeting, but I can't find a good, reusable implementation.
A solution with jQuery would be perfect.

Thank.

Answer 1

I could not find a solution that perfectly matched my requirements, so I got the following:

I am using the jQuery keypress() event to verify that the user clicks the @ symbol.
If so, a modal dialog is displayed using the jQuery UI. This dialog box contains an autocomplete text box (you can use many options here, but I recommend jQuery Tokeninput )
When the user selects an option in the dialog box, the tag is added to the text box and the dialog closes.

This is not the most elegant solution, but it works, and it does not require additional keystrokes compared to my original design.

Edit
Thus, we have a large text field in which the user can enter text. It should be able to "tag" the user (this simply means inserting #<userid> into the text). I join the jQuery keyup event and detect the @ character using (e.which == 64) to show a modal text field for selecting user tags.

The softness of the solution is just a modal dialog with the jQuery Tokeninput text box. As the user enters here, the user list is loaded via AJAX. For proper use, see Examples on the website. When the user closes the dialog, I paste the selected identifiers into a large text box.

Answer 2

I'm sure your problem has been resolved a long time ago, but jquery-textcomplete looks like it would do the job.

Answer 3

Another great library that solves this At.js problem

Source

Demo

Answer 4

Try the following:

 (function($){ $.widget("ui.tagging", { // default options options: { source: [], maxItemDisplay: 3, autosize: true, animateResize: false, animateDuration: 50 }, _create: function() { var self = this; this.activeSearch = false; this.searchTerm = ""; this.beginFrom = 0; this.wrapper = $("<div>") .addClass("ui-tagging-wrap"); this.highlight = $("<div></div>"); this.highlightWrapper = $("<span></span>") .addClass("ui-corner-all"); this.highlightContainer = $("<div>") .addClass("ui-tagging-highlight") .append(this.highlight); this.meta = $("<input>") .attr("type", "hidden") .addClass("ui-tagging-meta"); this.container = $("<div></div>") .width(this.element.width()) .insertBefore(this.element) .addClass("ui-tagging") .append( this.highlightContainer, this.element.wrap(this.wrapper).parent(), this.meta ); var initialHeight = this.element.height(); this.element.height(this.element.css('lineHeight')); this.element.keypress(function(e) { // activate on @ if (e.which == 64 && !self.activeSearch) { self.activeSearch = true; self.beginFrom = e.target.selectionStart + 1; } // deactivate on space if (e.which == 32 && self.activeSearch) { self.activeSearch = false; } }).bind("expand keyup keydown change", function(e) { var cur = self.highlight.find("span"), val = self.element.val(), prevHeight = self.element.height(), rowHeight = self.element.css('lineHeight'), newHeight = 0; cur.each(function(i) { var s = $(this); val = val.replace(s.text(), $("<div>").append(s).html()); }); self.highlight.html(val); newHeight = self.element.height(rowHeight)[0].scrollHeight; self.element.height(prevHeight); if (newHeight < initialHeight) { newHeight = initialHeight; } if (!$.browser.mozilla) { if (self.element.css('paddingBottom') || self.element.css('paddingTop')) { var padInt = parseInt(self.element.css('paddingBottom').replace('px', '')) + parseInt(self.element.css('paddingTop').replace('px', '')); newHeight -= padInt; } } self.options.animateResize ? self.element.stop(true, true).animate({ height: newHeight }, self.options.animateDuration) : self.element.height(newHeight); var widget = self.element.autocomplete("widget"); widget.position({ my: "left top", at: "left bottom", of: self.container }).width(self.container.width()-4); }).autocomplete({ minLength: 0, delay: 0, maxDisplay: this.options.maxItemDisplay, open: function(event, ui) { var widget = $(this).autocomplete("widget"); widget.position({ my: "left top", at: "left bottom", of: self.container }).width(self.container.width()-4); }, source: function(request, response) { if (self.activeSearch) { self.searchTerm = request.term.substring(self.beginFrom); if (request.term.substring(self.beginFrom - 1, self.beginFrom) != "@") { self.activeSearch = false; self.beginFrom = 0; self.searchTerm = ""; } if (self.searchTerm != "") { if ($.type(self.options.source) == "function") { self.options.source(request, response); } else { var re = new RegExp("^" + escape(self.searchTerm) + ".+", "i"); var matches = []; $.each(self.options.source, function() { if (this.label.match(re)) { matches.push(this); } }); response(matches); } } } }, focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { self.activeSearch = false; //console.log("@"+searchTerm, ui.item.label); this.value = this.value.replace("@" + self.searchTerm, ui.item.label) + ' '; self.highlight.html( self.highlight.html() .replace("@" + self.searchTerm, $("<div>").append( self.highlightWrapper .text(ui.item.label) .clone() ).html()+' ') ); self.meta.val((self.meta.val() + " @[" + ui.item.value + ":]").trim()); return false; } }); } }); 

 body, html { font-family: "lucida grande",tahoma,verdana,arial,sans-serif; } .ui-tagging { position: relative; border: 1px solid #B4BBCD; height: auto; } .ui-tagging .ui-tagging-highlight { position: absolute; padding: 5px; overflow: hidden; } .ui-tagging .ui-tagging-highlight div { color: transparent; font-size: 13px; line-height: 18px; white-space: pre-wrap; } .ui-tagging .ui-tagging-wrap { position: relative; padding: 5px; overflow: hidden; zoom: 1; border: 0; } .ui-tagging div > span { background-color: #D8DFEA; font-weight: normal !important; } .ui-tagging textarea { display: block; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; background: transparent; border-width: 0; font-size: 13px; height: 18px; outline: none; resize: none; vertical-align: top; width: 100%; line-height: 18px; overflow: hidden; } .ui-autocomplete { font-size: 13px; background-color: white; border: 1px solid black; margin-bottom: -5px; width: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea></textarea> 

http://jsfiddle.net/mekwall/mcWnL/52/ This link will help you

Answer 5

Have you tried it

GITHUB: https://github.com/podio/jquery-mentions-input

DEMO / CONFIG: http://podio.imtqy.com/jquery-mentions-input/

This is pretty easy to implement.

Answer 6

I created a Meteor package for this purpose. The Meteor data model allows you to quickly search for multiple rules using custom lists. If you do not use Meteor for your web application, (I suppose), you, unfortunately, will not find anything so surprising for autocomplete.

Auto-update users with @ , where online users are displayed in green:

On the same line, autofill of something else with metadata and bootstrap icons:

Fork, tension and improvement:

https://github.com/mizzao/meteor-autocomplete

Answer 7

I recently had to face this problem, and here's how I nailed ...

• Get row index at cursor position in text field using selectionStart
• cut a line from index 0 to cursor position
• Paste it into the range (since the span has several border fields)
• Get field sizes using element.getClientRects () relative to the view port. (here is the MDN Reference )
• Calculate the top and left and submit them to the drop-down list

This works in all recent browsers. not tested on old

Here is the work box

Answer 8

THIS should work. As for @ starting a search, simply add (dynamically or not) a character to the beginning of each possible search term.