jQuery的自动完成多输出

时间:2012-10-18 08:55:31

标签: jquery asp.net ajax

你好我根据搜索条件填充了文本框,即如果我输入a那么以a开头的项目填充在文本框中,而且我还使用了另一个文本框,其中我显示了partyname但问题是当我选择值时项目文本框它没有显示在文本框中,但是partyname文本框正在工作,即当我从下拉列表中选择partyname时,它显示在隐藏字段和文本框中,但是如果项目不能正常工作我发送我的jquery函数所以请帮助

$(document).ready(function() {
    SearchText();
    SearchItem();
});

function SearchText() {
    $('input[name$="tbAuto"]').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "PartyList.asmx/FetchPartyList",
                data: "{ 'prefix': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    response(data.d);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 1,
        focus: function(event, ui) {
            $('input[name$="tbAuto"]').val(ui.item.Name);
            return false;
        },
        select: function(event, ui) {
            $('input[name$="tbAuto"]').val(ui.item.Name);
            $('input[name$="tbHidden"]').val(ui.item.value);
            return false;
        }
    }).data('autocomplete')._renderItem = function(ul, item) {
        return $('<li>').data('item.autocomplete', item).append('<a>' + item.Name + '</a>').appendTo(ul);
    };
}


function SearchItem() {
    $('input[name$="txtitem"]').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "Itemslist.asmx/FetchItemList",
                data: "{ 'prefix': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    response(data.d);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 1,
        focus: function(event, ui) {
            $('input[name$="txtitem"]').val(ui.item1.Name);
            return false;
        },
        select: function(event, ui) {
            $('input[name$="txtitem"]').val(ui.item1.Name);
            $('input[name$="hditem"]').val(ui.item1.value);
            return false;
        }
    }).data('autocomplete')._renderItem = function(ul, item1) {
        return $('<li>').data('item1.autocomplete', item1).append('<a>' + item1.Name + '</a>').appendTo(ul);
    };
}

ItemInfo类:

public class Iteminfo
{
    connection oConnection = new connection();
    Control oControl = new Control();
    AccountInfo oAccount = new AccountInfo();
    connection c = new connection();

    public string Title { get; set; }
    public string Name { get; set; }
    public string value { get; set; }

    public List<Iteminfo> GetItems(string prefixText)
    {
        List<Iteminfo> itemList = new List<Iteminfo>();

        try
        {
            DataTable dt;
            AccountInfo oAccount = new AccountInfo();
            //dt = oAccount.GetAccountInfo((int)HttpContext.Current.Session["CompCode"], 0);
            dt = oAccount.GetIteminfo(prefixText);
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    itemList.Add(new Iteminfo() { Name = dt.Rows[i]["groupname"].ToString() + dt.Rows[i]["subgroup"].ToString() + dt.Rows[i]["itemname"], Title = dt.Rows[i]["itemname"].ToString(), 
                    value = dt.Rows[i]["groupname"].ToString() + dt.Rows[i]["subgroup"].ToString() + dt.Rows[i]["itemname"].ToString()+";"+dt.Rows[i]["itemcode"].ToString() });
                }
            }
        }
        catch (SqlException)
        {
            itemList.Add(new Iteminfo() { Name = "Problem Getting Results.", value = "Error" });
        }

        if (itemList.Count == 0)
            itemList.Add(new Iteminfo() { Name = "Nothing to Display.", value = "Info" });

        return itemList;
    }
}

页面方法:

[WebMethod]
public List<Iteminfo> FetchItemList(string prefix)
{
    var items = new Iteminfo();
    var fetchitems = items.GetItems(prefix);
    //.Where(m => m.Name.ToLower().StartsWith(prefix.ToLower()));

    // .Where(m => m.Name.ToLower().StartsWith(prefix.ToLower()));
    return fetchitems.ToList();
}

1 个答案:

答案 0 :(得分:0)

您的第一个问题似乎是在SearchItem函数中。您不应该将所有item更改为item1,因为这是内部jQuery UI名称,并且它始终相同(适用于所有实例)。所以你的JavaScript函数应该是这样的:

function SearchItem() {
    $('input[name$="txtitem"]').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "Itemslist.asmx/FetchItemList",
                data: "{ 'prefix': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    response(data.d);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 1,
        focus: function(event, ui) {
            $('input[name$="txtitem"]').val(ui.item.Name);
            return false;
        },
        select: function(event, ui) {
            $('input[name$="txtitem"]').val(ui.item.Name);
            $('input[name$="hditem"]').val(ui.item.value);
            return false;
        }
    }).data('autocomplete')._renderItem = function(ul, item) {
        return $('<li>').data('item.autocomplete', item).append('<a>' + item.Name + '</a>').appendTo(ul);
    };
}

关于选择器可能存在一些其他错误,但如果没有HTML / ASPX代码则无法判断。