实现 jquery UI 自动完成以在您键入“@"时显示建议； [英] Implementing jquery UI autocomplete to show suggestions when you type "@"

问题描述

我正在使用 jquery UI AutoComplete 来允许用户使用 @mentions 标记朋友.默认情况下，只要您将焦点放在文本框上，就会显示自动完成建议.如何让建议仅在您键入@"时出现?这是我到目前为止的代码:

var availableTags = ["动作脚本","AppleScript","阿普",基本的"，];$("#tags").自动完成({来源:availableTags，最小长度:0});

解决方案

您可以通过为自动完成的 source 选项提供一个函数来实现:

var availableTags = [/* Snip */];函数拆分(val){返回 val.split(/@s*/);}函数extractLast(term) {返回 split(term).pop();}$("#tags")//选择项目时不要离开选项卡上的字段.bind("keydown", function(event) {if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {event.preventDefault();}}).自动完成({最小长度:0，来源:功能(请求，响应){var term = request.term,结果 = [];/* 如果用户输入了@":*/如果(term.indexOf(@")> = 0){term =extractLast(request.term);/* 如果他们在@"之后输入了任何内容:*/如果(term.length > 0){结果 = $.ui.autocomplete.filter(可用标签，术语)；/* 否则，告诉他们开始输入！*/} 别的 {结果 = ['开始输入...'];}}/* 使用结果调用回调: */响应(结果)；},焦点:函数(){//防止在焦点上插入值返回假；},选择:功能(事件，用户界面){var term = split(this.value);//移除当前输入条款.pop();//添加选中的项目条款.push(ui.item.value);//添加占位符以获取末尾的逗号和空格条款.push("");this.value = term.join("");返回假；}});

这是一个工作示例:http://jsfiddle.net/BfAtM/2/>

请注意，这几乎与此演示相同，除了要求用户键入@".该代码位于 source 选项参数中.

希望有所帮助.

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 UI 自动完成以在您键入“@"时显示建议；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！