Question

我想知道当使用箭头移动或按下输入而不是替换文本框中的整个文本时，如何使jquery将自动完成选项附加到文本框？到目前为止，这是我的代码：

服务器端：

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

Answer 1

您可以通过在jQueryUI网站上调整multiple values演示来实现此目的。

你最终可能会得到这样的结果：

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/

Answer 2

我不确定这是否是您要找的，但是jquery ui自动完成上有一个appendTo选项

http://jqueryui.com/demos/autocomplete/#option-appendTo

jQuery自动完成延续而不是替换

2 个答案: