自动完成逗号分隔文本框中的多个值。 我想用列表替换硬编码的值 <String> 在控制器类中可用

Question

I am struggling to replace the JSON source list with my List avaliable in controller class.

The below code works fine. But I want to replace the hardcoded list "availableTags" with my List<String> by redirecting the call to controller method (using url).

Please advise.

jquery code:

$(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;
        }
    });
}); 

input textbox field:

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

when I implement single value autocomplete I am able to redirect to url. Please see below for Single value text box autocomplete.

jquery code:

$("#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]
                    }
                }))
            }
        })
    }
});

Answer 1

You should be able to do this by using the extractLast function and sending up the result of calling that function on 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 */
});