Question

我正在寻找一个Javascript自动完成实现，其中包括以下内容：

可以在HTML textarea中使用
允许在不调用自动填充的情况下键入常规文本
检测@字符并在键入时启动自动填充
通过AJAX

我认为这与Twitter在推文中标记时所做的类似，但我找不到一个好的，可重复使用的实现。
使用jQuery的解决方案将是完美的。

感谢。

Answer 1

我确定你的问题早已解决，但jquery-textcomplete似乎可以胜任。

Answer 2

解决此问题的另一个很棒的图书馆At.js

Source

Demo

Answer 3

你试过这个吗？

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

DEMO / CONFIG：http://podio.github.io/jquery-mentions-input/

实施起来非常简单。

Answer 4

试试这个：

(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/ 此链接将帮助您

Answer 5

我找不到任何完全符合我要求的解决方案，所以我最终得到了以下内容：

我使用jQuery keypress()事件来检查用户是否按下@字符如果是这种情况，则使用jQuery UI显示模式对话框。此对话框包含自动填充文本字段（此处可以使用许多选项，但我建议jQuery Tokeninput）
当用户在对话框中选择一个选项时，会在文本字段中添加一个标记，并关闭该对话框。

这不是最优雅的解决方案，但它可以工作，与原始设计相比，它不需要额外的按键。

修改
所以基本上，我们有一个大文本框，用户可以在其中输入文本。他应该能够“标记”用户（这只是意味着在文本中插入#<userid>）。我附加到jQuery keyup事件并使用@检测(e.which == 64)字符，以显示带有文本字段的模式，用于选择要标记的用户。

解决方案的核心只是这个带有jQuery Tokeninput文本框的模态对话框。当用户在此处键入时，用户列表通过AJAX加载。请参阅网站上的示例，了解如何正确使用它。当用户关闭对话框时，我将选定的ID插入到大文本框中。

Answer 6

我为此创建了一个Meteor包。 Meteor的数据模型允许使用自定义渲染列表进行快速多规则搜索。如果您没有将Meteor用于您的网络应用程序（我相信），那么很遗憾，您无法找到任何可用于自动完成的功能。

使用@自动填充用户，其中在线用户以绿色显示：

enter image description here

在同一行中，使用元数据和引导程序图标自动填充其他内容：

enter image description here

分叉，拉动和改进：

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

Answer 7

最近我不得不面对这个问题，这就是我如何确定......

使用selectionStart
将字符串从索引0切片到光标位置
将其插入跨度（因为span具有多个边框）
使用相对于视口的element.getClientRects（）获取边框的尺寸。（这是MDN Reference）
计算顶部和左侧并将其提供给下拉列表

这适用于所有最新的浏览器。没有在旧的测试

这是Working bin

Answer 8

另一个提供类似功能的插件：

AutoSuggest

您可以将其与自定义触发器一起使用，也可以将其与任何触发器一起使用。与输入字段，文本区域和contenteditables一起使用。 jQuery不是依赖项。

Answer 9

这个小小的延伸似乎是最接近于提出要求的。由于它很小，因此可以很容易地理解和修改。 https://msdn.microsoft.com/en-us/library/system.midpointrounding(v=vs.110).aspx

Answer 10

THIS应该有效。关于@开始搜索，只需将符号添加（动态或不添加）到每个可能的搜索词的开头。

textarea中的Twitter式自动填充功能

10 个答案: