如何在tagsInput插件中调用Jquery自动完成插件

时间:2017-06-15 06:18:50

标签: jquery-ui-autocomplete bootstrap-tags-input

我已按照.autocomplete("txt")_renderitem的方式格式化自动填充结果,但我无法在tagsInput插件中使用此功能。如果我只是想使用自动填充功能以及我不使用renderitem时效果很好。

<script type="text/javascript">
    $('#txtIdeaTags').tagsInput({
        'autocomplete_url': '/Idea/AutoComplete',
        'autocomplete': ({
            source: function (request, response) {
                $.ajax({
                    url: "/Idea/AutoComplete", type: "POST", dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.label, value: item.id, icon: item.icon, desc: item.desc }; //updated code
                        }));
                    }
                });
            },
            focus: function (event, ui) {
                $("#txtIdeaTags").val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $("#txtIdeaTags").val(ui.item.label);
                return false;
            }
        }).autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>")
                .append("<div>" + item.label + "<br>" + item.desc + "</div>")
                .append("<a><img height=\"20\" width=\"20\" src='" + "http://localhost:60268/Images/" + item.icon + "' /></a>")
                .appendTo(ul);
        }
    });
</script>

// error i get is autocomplete is not a function. Kindly give a solution please! 

1 个答案:

答案 0 :(得分:-1)

$(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"
    ];
    $(".TagClass >> Input").autocomplete({
        source: availableTags
    });
});

我就是这样做的,我使用的格式是〜.autocomplete({source:YourArray})