母版页上的多个自动完成jquery实例

时间:2014-02-25 04:25:35

标签: jquery jquery-autocomplete

我有两个jquery用于从母版页上的数据库中获取数据:

<script type="text/javascript">
        $(document).ready(function () {
            SearchText1();
        });
        function SearchText1() {
            $("#txtSearch2").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "ItemGetter.aspx/GetAutoCompleteData",
                        data: "{'username':'" + document.getElementById('txtSearch2').value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        }
</script>

和另一个!

<script type="text/javascript">
    $(document).ready(function () {
        SearchText1();
    });
    function SearchText1() {
        $(".manish").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "ItemGetter.aspx/GetAutoCompleteData",
                    data: "{'username':'" + document.getElementById('txtSearch1').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }
        });
    }
</script>

我试图实现自动填充的两个文本框是:

<asp:TextBox id="txtSearch2" placeholder="Search Item" class="bjg autosuggest" runat="server" style="margin-top:8px"></asp:TextBox>

<asp:TextBox id="txtSearch1" placeholder="Search Item" class="manish" runat="server" style="margin-top:8px"></asp:TextBox>

我注意到我先写的哪个脚本不起作用。我也尝试过不同的类作为选择器,我也尝试使用id的文本框。但这是我无法理解的。甚至我试图将一个文本框放在母版页中,另一个文本框放在内容页面中。但似乎没有什么对我有用。请看一下。

1 个答案:

答案 0 :(得分:0)

  

您的功能包含重复项,请将其设为一项功能。我补充道   一个类名“textClass”并使用它jquery。

<asp:TextBox id="txtSearch2" placeholder="Search Item" class="bjg autosuggest textClass" runat="server" style="margin-top:8px"></asp:TextBox>

<asp:TextBox id="txtSearch1" placeholder="Search Item" class="manish textClass" runat="server" style="margin-top:8px"></asp:TextBox>

Jquery是:

$(document).ready(function () {
            SearchText1();

            function SearchText1() {
            $(".textClass").autocomplete({
                var that = $(this);
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "ItemGetter.aspx/GetAutoCompleteData",
                        data: "{'username':'" + that.val() + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        }

        });

$(["id^='txtSearch']").autocomplete ({ // here your code });