【问题标题】:jQuery AutoComplete multiple OutputjQuery自动完成多个输出
【发布时间】:2012-10-03 01:34:15
【问题描述】:

我正在使用 jQuery AutoComplete 根据输入的值从数据库中获取结果。然后,用户将单击一个搜索按钮来告诉页面搜索该特定条目的详细信息。

我想获得 2 个值,NameTitle。我只想向用户显示 Name,而页面使用 Title 作为搜索条件。

例如:当有人输入Vehicle时,结果会在列表中显示Vehicle1, Vehicle2
当用户点击Vehicle1时,会出现一个隐藏框,TitleBike,如Vehicle2,则隐藏框为@987654325 @。

我可以让 Name 正确显示在文本框中,但我无法终生(并且经过 2 天的搜索)将 Title 绑定到一个隐藏的盒子。

JavaScript:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".tb").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "AutoComplete.asmx/FetchEmailList",
                        data: "{ 'prefix': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    //value: item.Title,
                                    label: item.Name
                                };
                            }));
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2
            });
        });
    </script>

ASPX 代码:

<div class="ui-widget" >
    <asp:TextBox ID="tbAuto" class="tb" runat="server">
    </asp:TextBox>
    <asp:TextBox runat="server" ID="tbHidden" class="tb"></asp:TextBox>
</div>

代码隐藏:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<Employee> FetchEmailList(string prefix)
{
    var emp = new Employee();
    var fetchEmail = emp.GetEmployeeList(prefix)
    .Where(m => m.Name.ToLower().StartsWith(prefix.ToLower()));
    return fetchEmail.ToList();
}    
}

CompletionClass:(请原谅命名)

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

    public List<Employee> GetEmployeeList(string prefixText)
    {
        List<Employee> cmpList = new List<Employee>();

        SqlConnection db = DataConn.SqlConnection();

        db.Open();
        SqlTransaction transaction = db.BeginTransaction();

        //var array = new ArrayList();

        try
        {
            SqlCommand command = new SqlCommand("Select [something] FROM vwGetDetails WHERE [something_else] LIKE N'%" + prefixText + "%' ORDER BY [thatOther_thing] ASC", db, transaction);
            using (SqlDataReader reader = command.ExecuteReader())
            {
                while (reader.Read())
                {
                    cmpList.Add(new Employee() { Name = reader["Value1"].ToString(), Title = "Value1_Cat", value = "Value1_Cat"});
                }
            }

            command = new SqlCommand("Select [something] FROM [somewhere] WHERE [thingy] LIKE N'%" + prefixText + "%' ORDER BY [previousThingy] ASC", db, transaction);
            using (SqlDataReader reader = command.ExecuteReader())
            {
                while (reader.Read())
                {
                    cmpList.Add(new Employee() { Name = reader["Value2"].ToString(), Title = "Value2_Cat", value = "Value2_Cat"});
                }
            }

            transaction.Commit();
        }
        catch (SqlException)
        {
            transaction.Rollback();
            cmpList.Add(new Employee() { Name = "Problem Getting Results.", value = "Error"});
            //array.Add("Problem Getting Results.");
        }

        if (cmpList.Count == 0)
            cmpList.Add(new Employee() { Name = "Nothing to Display.", value = "Info"});
        //array.Add("Nothing to Display.");

        //return array;

        return cmpList;
    }

}

【问题讨论】:

    标签: c# jquery asp.net autocomplete


    【解决方案1】:

    那些对 JavaScript 的修改应该可以解决问题:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input[name$="tbAuto"]').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "AutoComplete.asmx/FetchEmailList",
                        data: "{ 'prefix': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2,
                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.Title);
                    return false;
                }
            }).data('autocomplete')._renderItem = function(ul, item) {
                return $('<li>').data('item.autocomplete', item).append('<a>' + item.Name + '</a>').appendTo(ul);
            };
        });
    </script>
    

    这里的假设是选择器准确地返回我们正在处理的元素,如果不是,它们需要调整。

    【讨论】:

    • 太接近了!我将“隐藏字段”绑定到可见文本框。 “新文本框”显示“名称”(与旧文本框完全相同)而不是标题。编辑:添加了 .aspx 页面代码..对不起。
    • 修复了!我意识到aspx控件的ID发生了变化:/应该早点想到!我把隐藏控件的class改成td了,$('.td').val(ui.item.Title);...什么时候可以给你喝杯咖啡?? :D
    • @NewAmbition 在您更新之后,我已将选择器更改为更精确的选择器,因此将来的答案将更有用。在咖啡的主题中 - 心灵锻炼(和要点:>)就足够了:)。
    • @iProgrammer 我怀疑我们可以在 cmets 中解决这个问题(我们也不应该这样做,因为这不是 cmets 的用途)。我需要更多的上下文、源代码等。
    • @NewAmbition Justice 已被送达
    【解决方案2】:

    酷。几天来我一直在谷歌搜索这个解决方案......优秀的干净代码! 只是一个小评论:使用jqueryUI 1.10,这个 抛出 javascript 异常。 .data('autocomplete')._renderItem = function(ul, item) {... 我用过 .data('ui-autocomplete')._renderItem = function(ul, item) {... 一切都很好。

    【讨论】:

    • 很高兴您能找到解决方案 :)
    猜你喜欢
    • 2012-10-20
    • 1970-01-01
    • 1970-01-01
    • 2011-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-17
    • 1970-01-01
    相关资源
    最近更新 更多