Typeahead.js 和 Bloodhound.js 与 C# WebForms WebMethod 的集成

Posted 2023-05-09

【中文标题】Typeahead.js 和 Bloodhound.js 与 C# WebForms WebMethod 的集成

【英文标题】：Typeahead.js and Bloodhound.js integration with C# WebForms WebMethod

【发布时间】：2014-10-08 05:21:28

【问题描述】：

我正在尝试在 C# 中实现一个简单的WebMethod 来搜索 50,000 人的数据库。我正在使用 Twitter Bootstrap bloodhound.js 和 typeahead.js 来标记和自动完成回复。

当我运行此代码时，预先输入会显示一个带有undefined 的下拉菜单。

如何正确处理 JSON 响应以去除 .NET WebMethod 返回的 d 对象并将我的记录正确传递给 Bloodhound？我已经使用 jQuery 的 $.ajax 提供的 dataFilter 方法尝试过这个，但它不适合我。

C# WebMethod：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object searchStaffByName(string q)

    using (App_Data.DQDBDataContext dc = new App_Data.DQDBDataContext())
    
        var results = dc.getStaffDetails(q).ToList();
        return new  Status = "OK", Records = results, Count = results.Count ; 
    

Typeahead JS 实现：

var textlookup = new Bloodhound(
    datumTokenizer: function (d) 
        return Bloodhound.tokenizers.whitespace(d.val);
    ,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 
        url: 'Search.aspx/searchStaffByName',
        replace: function (url, query) 
            searchQuery = query;
            return url;
        ,
        ajax: 
            beforeSend: function (jqXhr, settings) 
                settings.data = JSON.stringify(
                    q: searchQuery
                );
                jqXhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
            ,
            dataFilter: function (data, type) 
                if (type === "json") 
                    data = $.parseJSON(data);
                    if (typeof data.d === 'object' && data.d.Count > 0) 
                        return data.d.Records;
                    
                
            ,
            type: 'POST'
        
    
);

textlookup.initialize();

$('.autocomplete').typeahead(
    hint: true,
    highlight: true,
    minLength: 3
,

    name: 'textlookup',
    displayKey: 'Forename',
    source: textlookup.ttAdapter()
);

示例 JSON 响应：

    "d": 
        "Status":"OK",
        "Records": [
            "id":45711192,
            "phone":"514-579-5721",
            "Forename":"Jayden",
            "Surname":"Adams",
            "DOB":"\/Date(990226800000)\/"
        ,
        
            "id":12603644,
            "phone":"333-143-9094",
            "Forename":"Jake",
            "Surname":"Adams",
            "DOB":"\/Date(43542000000)\/"
        ,
        
            "id":68196438,
            "phone":"440-505-2403",
            "Forename":"Josh",
            "Surname":"Adams",
            "DOB":"\/Date(-51152400000)\/"
        ],
        "Count":6
    

【问题讨论】：

我会在解析后仔细检查 data 实际上是什么，然后确保您进入了 if 块。

【参考方案1】：

如果您的预输入数据将位于 name: 'textlookup', 数组中，请先使用您的 JSON 响应填充该数组。以下假设数据是 JSON。

textlookup = [];
    for (var i = 0; i < data.d.Records.length; i += 1) 
       textlookup.push(data.d.Records[i].Forename);

这应该将每个Forename 推入数组textlookup。您将收到未定义的错误，因为您将对象放入数组中。

【参考方案2】：

我花了一些时间，发现最好返回一个字符串数组。 这是我的网络方法。

    [WebMethod]
    public static string[] MemberLookup(string MbrFullName)
    

        DataSet ds = (dataset provider goes here)

        List<string> members = new List<string>();

        foreach(DataRow dr in ds.Tables[0].Rows)
         members.Add(string.Format("0-1", dr["label"].ToString(), dr["value"].ToString())); 
        return members.ToArray();