自动填充逗号分隔文本框中的多个值。我想用控制器类</string>中可用的List <string>替换硬编码值

时间:2014-09-04 13:57:10

标签: javascript jquery spring jquery-ui jquery-ui-autocomplete

我正在努力用控制器类中的List avalable替换JSON源列表。

以下代码运行正常。但是我希望通过将调用重定向到控制器方法(使用url)来将硬编码列表&#34; availableTags&#34; 替换为我的List<String>

请指教。

jquery代码:

$(function () {

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"];

    function split(val) {
        alert($ {
            acTypes
        });
        return val.split(/,\s*/);
    }

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

    $("#tags")
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
            event.preventDefault();
        }
    })
        .autocomplete({
        minLength: 0,
        source: function (request, response) {
            // delegate back to autocomplete, but extract the last term
            response($.ui.autocomplete.filter(
            availableTags, extractLast(request.term)));
        },
        focus: function () {
            // prevent value inserted on focus
            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;
        }
    });
}); 

输入文本框字段:

<div class="ui-widget">
    <label for="tags">Tag programming languages:</label>
    <input id="tags" size="50">
</div>

当我实现单值自动填充时,我能够重定向到url。请参阅下面的单值文本框自动完成功能。

jquery代码:

$("#tags").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/test/testPublisher/ajaxList.htm",
            minLength: 1,
            delay: 300,
            data: {
                query: request.term,
                rowLimit: 10,
                companyStateBothFlag: 0
            },
            dataType: "text",
            success: function (data) {
                var dataArray = data.split("\n");
                response($.map(dataArray, function (item) {
                    return {
                        label: item,
                        value: item == "No results returned for this query" ? "" : item.split(" ")[0]
                    }
                }))
            }
        })
    }
});

1 个答案:

答案 0 :(得分:0)

您应该可以使用extractLast函数并在request.term上发送调用该函数的结果来执行此操作:

.autocomplete({
    minLength: 0,
    source: function (request, response) {
        // extract the last term:
        var term = extractLast(request.term);

        $.ajax({
            url: "/test/testPublisher/ajaxList.htm",
            minLength: 1,
            delay: 300,
            data: {
                query: term,
                rowLimit: 10,
                companyStateBothFlag: 0
            },
            dataType: "text",
            success: function (data) {
                var dataArray = data.split("\n");
                response($.map(dataArray, function (item) {
                    return {
                        label: item,
                        value: item == "No results returned for this query" ? "" : item.split(" ")[0]
                    };
                }))
            }
        });
    },
    /* other options omitted */
});