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 の Web サイトにある複数値のデモを適合させます。

おそらく次のような結果になるでしょう。

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 autocomplete には appendTo オプションがあります

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

于 2012-09-15T14:56:10.233 に答える