Автозаполнение с помощью идентификатора повторителя jQuery и asp.net - PullRequest
Новая
       9

Автозаполнение с помощью идентификатора повторителя jQuery и asp.net

2 голосов
/ 23 марта 2011

У меня есть asp: Textbox с автозаполнением, данные поступают из веб-сервиса и возвращают данные Json.Когда элемент выбран, он помещает значение (идентификатор) в «скрытое» поле, а цену - в другое текстовое поле.Это все отлично работает.Но когда я помещаю более или менее тот же код в репитер asp:, он не выполняет автозаполнение.

Это код из моего кода asp: 

<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<asp:TextBox runat="server" id="txtItem2" style="width:500px"/><br />  
<asp:TextBox runat="server" ID="txtHiddenItemID2"  />  <br />  
<asp:TextBox runat="server" ID="txtPrice2" />      

<asp:Repeater ID="rptArtLijnen" runat="server" 
    onitemcommand="rptArtLijnen_ItemCommand">
    <HeaderTemplate>
        <table border="Solid">
            <tr>....
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
            <tr>
                <div class="ItemAutoComplete" id="ItemAutoCompleteDiv">
                    <td>
                            <asp:TextBox runat="server"  ID="txtItem" Text='<%#Eval("Item") %>' class="txtItemclass" />
                            <asp:TextBox ID="txtHiddenItemID" runat="server" class="txtHiddenItemclass"/>               
                    </td>
                    <td><asp:TextBox runat="server" ID="txtPrice" value='<%#Eval("Price") %>'/></td>
                </div>
            </tr>               
    </ItemTemplate>
    <FooterTemplate>
     </Table>
    </FooterTemplate>
</asp:Repeater>

Это мойjQuery код: 

$(document).ready(function () {
        //this handles the textbox out of the repeater
        $.ajax({
            type: "POST",
            url: "AutoCompleteItems.asmx/GetItemJ",
            dataType: "json",
            data: "{ 'data': '" + document.getElementById("txtItem2").value + "' }",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $('#txtItem2').autocomplete({
                    minLength: 0,
                    source: data.d,
                    focus: function (event, ui) {
                        $('#txtItem2').val(ui.item.value);
                        return false;
                    },
                    select: function (event, ui) {
                        $('#txtItem2').val(ui.item.ItemCode + " " + ui.item.Description);
                        $('#txtHiddenItemID2').val(ui.item.ID);
                        $('#txtPrice2').val(ui.item.Price);
                        return false;
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus + errorThrown);
            }
        });

        //this handles the textbox in the repeater
        $(".ItemAutoComplete").each(function (i, element) {
            var txtItem = $(this).find('input[id*=txtItem]:first')
            var txtHiddenItemID = $(this).find('input[id*=txtHiddenItemID]:first')
            var txtPrice = $(this).find('input[id*=txtPrice]:first')

            $.ajax({
                type: "POST",
                url: "AutoCompleteItems.asmx/GetItemJ",
                //async: false,
                //cache: false,
                dataType: "json",
                data: "{ 'data': '" + txtItem.val() + "' }",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    txtItem.autocomplete({
                        minLength: 0,
                        source: data.d,
                        focus: function (event, ui) {
                            txtItem.val(ui.item.value);
                            return false;
                        },
                        select: function (event, ui) {
                            txtItem.val(ui.item.ItemCode + " " + ui.item.Description);
                            txtHiddenItemID.val(ui.item.ID);
                            txtPrice.val(ui.item.Price);
                            return false;
                        }
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + errorThrown);
                }
            });

        });
    });

Это мой веб-метод (работает с текстовым полем) с классом: 

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<ItemJ>  GetItemJ(string data) {
   List<ItemJ> ItemJs = new List<ItemJ>();
    //if (Request.QueryString["q"] != null)
    //{
        try
        {
            DataContext d = new DataContext();
            List<string> typeList = "P R".Split(" ".ToCharArray()).ToList();
            //List<string> conditionList = "A D F".Split(" ".ToCharArray()).ToList();
            ItemJs = (from i in d.Items
                      join a in d.ItemAssortments on i.Assortment equals a.Assortment
                      where a.SecurityLevel <= 999
                      where i.SecurityLevel <= 999
                             && a.SecurityLevel <= 999
                             && i.IsSalesItem == true
                             && !typeList.Contains(i.Type.ToString())
                             && (new string[] { "A", "D", "F" }).Contains(i.Condition.ToString())
                             && (SqlMethods.Like(i.Description, "%" + data + "%") || SqlMethods.Like(i.ItemCode,  data + "%"))
                      orderby i.ItemCode
                      select new ItemJ
                      {
                          //value = i.ItemCode,// + " " + i.ItemCode + " ",
                          ItemCode = i.ItemCode,
                          Description = i.Description, //+ " " + i.ItemCode + " ",
                          ID = i.ID.ToString(),
                          Price = i.PurchasePrice.ToString()
                      }).Take(10).ToList();
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
            //return null;
        }
    //}
    return ItemJs;
}


public class ItemJ //: Item
{
    //string _name;
    string _value;

    public string value
    {
        get { return _Description + " (" + _ItemCode + ")"; }
        //set { _value = value; }
    }
    string _Description;

    public string Description
    {
        get { return _Description; }
        set { _Description = value; }
    }

    string _ID;

    public string ID
    {
        get { return _ID; }
        set { _ID = value; }
    }

    string _ItemCode;
    public string ItemCode
    {
        get { return _ItemCode; }
        set { _ItemCode = value; }
    }
    string _Price;

    public string Price
    {
        get { return _Price; }
        set { _Price = value; }
    }

}

Я потратил несколько часов на это, может кто-нибудь подсказать мне

Ответы [ 2 ]

0 голосов
/ 07 мая 2012

В основном проблема заключается в том, что ваше текстовое поле размещено внутри элемента управления повторителя, потому что этот jquery не может идентифицировать уникальный идентификатор для элемента управления, поэтому вместо автозаполнения jquery

попробуйте AutoCompleteExtender, он даст вам желаемый результат.

0 голосов
/ 23 марта 2011

Не могли бы вы попробовать извлечь идентификаторы из элементов управления в ItemAutoComplete Div и выполнить поиск по классу. У меня возникла эта проблема, когда я пытаюсь получить доступ к элементу управления в повторителе через идентификатор, потому что все идентификаторы должны быть уникальными на странице. так вместо 

var txtItem = $(this).find('input[id*=txtItem]:first')

попробовать 

var txtItem = $(this).find('.txtItemClass')

НТН

...