Typeahead.js和Bloodhound.js与c# WebForms的集成

Typeahead.js and Bloodhound.js integration with C# WebForms WebMethod

本文关键字：js WebForms 集成 Bloodhound Typeahead      更新时间：2023-09-26

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

当我运行这段代码时，typeahead显示了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
    }
}

如果您的预输入数据将在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。您正在得到未定义错误，因为您正在将对象放入数组。

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

    [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();
    }
相关文章：