实施jQuery用户界面自动完成，显示当你键入＆QUOT建议; @＆QUOT; [英] Implementing jquery UI autocomplete to show suggestions when you type "@"

问题描述

我使用jQuery UI自动完成功能，允许用户标记使用@mentions朋友。默认情况下，只要你把重点放在文本框中的自动完成建议出现。你怎么能建议只出现当你输入@？这是code我到目前为止有：

  VAR availableTags = [
            动作，
            AppleScript的
            ASP
            BASIC，
            ];
$（＃标签）。自动完成（{
    来源：availableTags，
    的minLength：0
}）;
 

解决方案

您可以通过提供的源的功能做到这一点自动完成的选项：

  VAR availableTags = [/ * *剪断/]函数split（VAL）{
    返回val.split（/ @ \\ S * /）;
}功能extractLast（项）{
    返回拆分（项）.pop（）;
}$（＃标签）
//选择项目时，不要从导航选项卡上的离场
.bind（的keydown，函数（事件）{
    如果（event.key code $ === .ui.key code.TAB＆放大器;＆安培; $（本）。数据（自动完成）menu.active。）{
        。事件preventDefault（）;
    }
}）。自动完成（{
    的minLength：0，
    来源：函数（请求，响应）{
        VAR长期= request.term，
            结果= [];        / *如果用户键入一个@：* /
        如果（term.indexOf（@）＆GT; = 0）{
            长期= extractLast（request.term）;
            / *如果已经输入后，@任何东西：* /
            如果（term.length大于0）{
                结果= $ .ui.autocomplete.filter（
                availableTags，期限）;
            / *否则，告诉他们要开始打字！ * /
            }其他{
                结果= ['开始键入...'];
            }
        }
        / *调用回调的结果：* /
        响应（结果）;
    }，
    重点：函数（）{
        // prevent值插入焦点
        返回false;
    }，
    选择：函数（事件，UI）{
        VAR而言=拆分（THIS.VALUE）;
        //删除当前输入
        terms.pop（）;
        //添加所选项目
        terms.push（ui.​​item.value）;
        //添加占位符来获得在最后逗号和空格
        terms.push（）;
        THIS.VALUE = terms.join（）;
        返回false;
    }
}）;
 

下面是一个工作示例： http://jsfiddle.net/BfAtM/2/

请注意，这是的几乎的相同这个演示，除了为需求用户键入@。这code位于源里面选项参数。

希望有所帮助。

I'm using jquery UI AutoComplete to allow users to tag friends using @mentions. By default, the autocomplete suggestions appear when as soon you put focus on the textbox. How can you make the suggestions appear only when you type "@"? This is the code I have so far:

var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            ];
$("#tags").autocomplete({
    source: availableTags,
    minLength: 0
});

解决方案

You can do this by providing a function to the source option of autocomplete:

var availableTags = [ /* Snip */];

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).autocomplete({
    minLength: 0,
    source: function(request, response) {
        var term = request.term,
            results = [];

        /* If the user typed an "@": */
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            /* If they've typed anything after the "@": */
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            /* Otherwise, tell them to start typing! */
            } else {
                results = ['Start typing...'];
            }
        }
        /* Call the callback with the results: */
        response(results);
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

Here's a working example: http://jsfiddle.net/BfAtM/2/

Note that this is almost identical to this demo, except for the requirement for the user to type "@". That code is located inside the source option argument.

Hope that helps.

这篇关于实施jQuery用户界面自动完成，显示当你键入＆QUOT建议; @＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！