AJAX自动完成Web服务asp.net

时间:2015-12-16 10:39:16

标签: jquery asp.net json web-services autocomplete

我在下面附上了一个自动完成的文本框图像,用户可以选择多种技能,我想,用户只能选择5种技能而不是更多。我怎样才能做到这一点。 我的代码

<script type="text/javascript">
    $(document).ready(function () {
        SearchText();
    });

    function SearchText() {
        $("[id*=ctl00_ContentMain_TextBoxSkills]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: 'WebServiceSkills.asmx/GetAutoCompleteData',
                    data: "{'skill':'" + extractLast(request.term) + "'}",
                    dataType: "json",
                    success: function (data) {
                        if (data.hasOwnProperty("d")){
                            // Leave the .d behind and pass the rest of the JSON object forward.
                            response(Array.parse(data.d));
                           }
                        else
                            // No .d; no transformation necessary.
                            response(Array.parse(data.d));
                    },
                    error: function (result) {
                        alert("No Result Found");
                    }
                });
            },
            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;
            }
        });
        $("#ctl00_ContentMain_TextBoxSkills").bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                    $(this).data("autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }
    }
</script>

图片在这里:我希望用户无法添加超过5种技能, Screenshot

0 个答案:

没有答案