jQuery 多个自动完成与 C#

发布于 2024-11-03 17:37:56 字数 3100 浏览 0 评论 0原文

我正在使用 jQuery UI 实现多个自动完成功能。我还使用网络服务来传递值。我检查了 jQuery UI 演示的多个自动完成并使用完全相同的代码,它一直工作到第一个自动完成并在末尾添加了一个“,”。

但在这里我被困住了,它不是在搜索下一个自动完成功能。好吧,我没有添加演示中的部分代码,我不知道它应该去哪里。如果有人可以帮助我。

这是我的代码

<script type="text/javascript">
    $(function () {

        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }

        $(".tb")

        // 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("autocomplete").menu.active) {
                event.preventDefault();
            }
        })

        .autocomplete({

            source: function (request, response) {
                $.ajax({
                    url: "EmployeeList.asmx/FetchEmailList",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        //term: extractLast(request.term),
                        response($.map(data.d, function (item) {
                            return {
                                value: item.Email
                            }
                        }))
                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },

            search: function () {
                // custom minLength
                var term = extractLast(this.value);
                alert(term);
                if (term.length < 2) {
                    return false;
                }
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                alert(terms);
                // 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: 2
        });
    });
</script>

这是我在 jQuery UI 演示中缺少的代码

.autocomplete({
            source: function( request, response ) {
                $.getJSON( "search.php", {
                    term: extractLast( request.term )
                }, response );
            },

我不知道在哪里添加此代码: 术语:extractLast(request.term) 这是整个代码的链接演示代码链接

I'm implementing multiple autocomplete using jQuery UI. Also I'm using webservice to pass values. I check jQuery UI demo for multiple autocomplete and using exact same code and it's working until the first autocomplete and adds a "," at the end.

But here I'm stuck, It's not searching for the next autocomplete. Well I didn't add a part of the code from the demo, which I don't know where it suppose to go. If someone could help me please.

Heare isthe My code

<script type="text/javascript">
    $(function () {

        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }

        $(".tb")

        // 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("autocomplete").menu.active) {
                event.preventDefault();
            }
        })

        .autocomplete({

            source: function (request, response) {
                $.ajax({
                    url: "EmployeeList.asmx/FetchEmailList",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        //term: extractLast(request.term),
                        response($.map(data.d, function (item) {
                            return {
                                value: item.Email
                            }
                        }))
                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },

            search: function () {
                // custom minLength
                var term = extractLast(this.value);
                alert(term);
                if (term.length < 2) {
                    return false;
                }
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                alert(terms);
                // 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: 2
        });
    });
</script>

Here is the code I'm missing from jQuery UI demo

.autocomplete({
            source: function( request, response ) {
                $.getJSON( "search.php", {
                    term: extractLast( request.term )
                }, response );
            },

I don't know where to add this code:
term: extractLast( request.term )
here is the link for entire code Demo Code link

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

如果没结果 2024-11-10 17:37:56

替换

data: "{ 'mail': '" + request.term + "' }"

 data: "{ 'mail': '" + extractLast(request.term) + "' }"

这个应该可以,但我不太喜欢你编码 JSON 的方式,可能会产生引号等问题。

replace

data: "{ 'mail': '" + request.term + "' }"

with

 data: "{ 'mail': '" + extractLast(request.term) + "' }"

this should work but i didn't like much the way you encode JSON, may create problems with quotes etc.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文