增加值jQuery的自动完成实时 [英] Adding values to jQuery autocomplete real time

问题描述

我在做一个象征性投入的风格与复选框自动完成（在一些用户类型，选择响应，增加了一个令牌到DOM视图）。

I'm making a "token input" style checkbox with an autocomplete (user types in something, selects a response, which adds a "token" to the DOM view).

使用jQuery自动完成，有没有办法在用户键入他们之后添加不在来源值列表？

Using jQuery autocomplete, is there a way to add values that aren't in the source list after the user types them in?

例如，源看起来像 [苹果，橙子，香蕉] 。用户键入梅子，使用文本字段时，。有没有一种方法来李子添加到源列表中，如果用户要求这样做？我知道有选择和，我可以检查的变化事件，但选择只有工作，如果有什么东西来选择（没有在这种情况下），而变更将需要一些超时检查，以验证用户是否已经停止打字。

For example, a source looks like ["Apples", "Oranges", "Bananas"]. The user types in "plums," when using the text field. Is there a way to add "Plums" to the list of sources if the user so desires? I know there are select and change events that I can check, but select only works if there's something to select (there isn't in this case), and change would require some kind of timeout check to verify that the user had stopped typing.

相反，有另外一个插件，我可以用它来完成这种行为？

Conversely, is there another plugin I could use to accomplish this behavior?

推荐答案

这能很好地工作自动完成的更改事件。这code假定有id为一个按钮添加当你想要一个新的项目添加到列表中出现。如果用户从列表中选择一个项目，将不会出现。有一些调整，可以提出，但概念的证明了这一点应能：

This should work fine with autocomplete's change event. This code assumes there's a button with id add that appears when you want to add a new item to the list. It will not appear if the user selects an item from the list. There are some tweaks that can be made, but this proof of concept should make it possible:

var source = ["Apples", "Oranges", "Bananas"];

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            response($.ui.autocomplete.filter(source, request.term));
        },
        change: function (event, ui) {
            $("#add").toggle(!ui.item);
        }
    });

    $("#add").on("click", function () {
        source.push($("#auto").val());
        $(this).hide();
    });
});

下面是一个例子： http://jsfiddle.net/rmGqB/

更新：听起来好像我有点误解了要求。您也可以点击进入结果自动完成将填充候选名单并驱动按钮根据搜索结果是否不产生任何精确匹配能见度：

Update: Sounds like I slightly misunderstood the requirement. You can also tap into the result that autocomplete would populate the candidate list with and drive the visibility of the button based on whether or not the results of the search yielded any exact matches:

var source = ["Apples", "Oranges", "Bananas"];

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            var result = $.ui.autocomplete.filter(source, request.term);

            $("#add").toggle($.inArray(request.term, result) < 0);

            response(result);
        }
    });

    $("#add").on("click", function () {
        source.push($("#auto").val());
        $(this).hide();
    });
});

示例： http://jsfiddle.net/VLLuJ/

这篇关于增加值jQuery的自动完成实时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！