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

问题描述

我正在制作一个带有自动完成功能的令牌输入"样式复选框(用户输入内容，选择一个响应，这会向 DOM 视图添加一个令牌").

使用 jQuery 自动完成功能，有没有办法在用户输入后添加不在 source 列表中的值?

例如，源看起来像 ["Apples", "Oranges", "Bananas"].用户在使用文本字段时输入 "plums,".如果用户愿意，有没有办法将李子"添加到来源列表中?我知道有我可以检查的 select 和 change 事件，但是 select 仅在有要选择的内容时才有效(这里没有case)，并且change 需要某种超时检查来验证用户是否已停止输入.

相反，我可以使用其他插件来完成此行为吗?

解决方案

这应该适用于 autocomplete 的更改事件.此代码假定当您想向列表中添加新项目时，会出现一个带有 id add 的按钮.如果用户从列表中选择一个项目，它不会出现.可以进行一些调整，但这种概念验证应该可以实现:

var source = ["Apples", "Oranges", "Bananas"];$(函数(){$("#auto").自动完成({来源:功能(请求，响应){响应($.ui.autocomplete.filter(source, request.term));},更改:功能(事件，用户界面){$("#add").toggle(!ui.item);}});$("#add").on("点击", function () {source.push($("#auto").val());$(this).hide();});});

这是一个例子:http://jsfiddle.net/rmGqB/

---

更新: 听起来我有点误解了要求.您还可以利用自动完成功能填充候选列表的结果，并根据搜索结果是否产生任何完全匹配来提高按钮的可见性:

var source = ["Apples", "Oranges", "Bananas"];$(函数(){$("#auto").自动完成({来源:功能(请求，响应){var 结果 = $.ui.autocomplete.filter(source, request.term);$("#add").toggle($.inArray(request.term, result) <0);响应(结果)；}});$("#add").on("点击", function () {source.push($("#auto").val());$(this).hide();});});

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

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).

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?

解决方案

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();
    });
});

Here's an example: 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();
    });
});

Example: http://jsfiddle.net/VLLuJ/

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