jQuery自动完成继续而不是替换 [英] jQuery autocomplete continuation instead of replace

问题描述

我想知道当用箭头移动或在choie上按Enter而不是替换文本框中的整个文本时，如何使jquery将自动完成选择附加到文本框吗? 到目前为止，这是我的代码:

I am wondering how to make jquery append autocomplete choice to textbox when moving with arrows or pressing enter on choie instead of replacing the whole text in the text box? Here is my code so far:

服务器端:

public ActionResult Autocomplete(string lang, string query)
        {
            try
            {
                var term = query.IndexOf(',') > 0 ? query.Substring(query.LastIndexOf(',') + 1).ToLower() : query.ToLower();
                if (!String.IsNullOrWhiteSpace(term))
                {
                    var data = context.Tags.Where(s => s.Name.StartsWith(term)).Select(x => x.Name).Take(5).ToArray();
                    return Json(data);
                }
                return Json(new string[] { });
            }
            catch
            {
                return Json(new string[] { });
            }
        }

客户端:

 <script type="text/javascript">  
  var tagsautocomplete = '@("/" + Url.RequestContext.RouteData.Values["lang"])/pictures/autocomplete';
    </script>

 $("#submit_picture_tags").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: tagsautocomplete, type: "POST", dataType: "json",
                data: { query: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item, value: item };
                    }))
                }
            })
        },
        minLength: 1,
    }); 

推荐答案

您可以通过修改多个值在jQueryUI网站上的演示.

You can do this by adapting the multiple values demo on jQueryUI's website.

您可能最终会遇到这样的事情:

You'll probably end up with something like this:

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

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

$("#submit_picture_tags").autocomplete({
    source: function (request, response) {
        var term = extractLast(request.term);
        $.ajax({
            url: tagsautocomplete, 
            type: "POST", 
            dataType: "json",
            data: { query: term },
            success: function (data) {
                response($.map(data, function (item) {
                    return item;
                }));
            }
        });
    },
    focus: function () {
        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;
    },
    minLength: 1
});

我显然无法为您的数据源提供一个有效的示例，但这是一个类似的远程数据源示例，可能会有所帮助: http://jsfiddle.net/RVkjV/

I obviously can't provide a working example with your datasource, but here's a similar example with a remote datasource that might help: http://jsfiddle.net/RVkjV/

这篇关于jQuery自动完成继续而不是替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！