1

我想知道如何在使用箭头移动或在 choie 上按 enter 而不是替换文本框中的整个文本时让 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,
    });
4

2 回答 2

3

您可以通过调整 jQueryUI 网站上的多值演示来做到这一点。

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

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/

于 2012-09-15T15:14:27.493 回答
0

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

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

于 2012-09-15T14:56:10.233 回答