Autocomplete with jQuery and asp.net repeater fills ID

问题

I have a asp:Textbox with autocomplete, the data comes from a webservice and returns Json data. When a item is selected it puts a value (the id) into a 'hidden' field and the price into another textbox . This all works fine. But when I put more or less the same code into a asp:repeater it doesn't do the autocomplete.

This is a graps from my asp code:

<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>

This is my jQuery code:

$(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);
                }
            });

        });
    });

This is my webmethod (which works with the textbox) with the class:

[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; }
    }

}

I've spent hours on this, can somebody give me a clue?

回答1:

basically problem is ,your text box is placed inside repeater control,because of this jquery not able to identify unique id for control,so insted of jquery autocomplete

try AutoCompleteExtender it will give you desire output.

回答2:

Could you please try taking out the IDs from the controls in ItemAutoComplete Div and search by class. I have had this problem when I try to access the control in repeater control through Id because all the IDs should be unique in a page. so instead of

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

try

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

HTH

来源：https://stackoverflow.com/questions/5407767/autocomplete-with-jquery-and-asp-net-repeater-fills-id