使用jQuery查询远程数据源自动完成

我试图使用jQuery UI自动完成小部件http://jqueryui.com/demos/autocomplete/#remote实现一个asp.net文本框。使用jQuery查询远程数据源自动完成

小部件的source属性需要一个字符串指向将返回JSON数据的URL资源。我有一个aspx页面，将返回以下内容：

代码背后：

private void GetWidgets(string name) 
{ 
    var jscriptSerializer = new JavaScriptSerializer(); 
    var widgets = jscriptSerializer.Serialize(GetMatchingWidgets(name)); 
    var script = "Widgets = {\"Widget\": " + widgets + "};"; 

    Page.ClientScript.RegisterStartupScript(Page.GetType(), "JSON", script, true); 
}

问题：

文档说的The request parameter "term" gets added to that URL. - 所以我应该能够得到“术语“作为查询字符串参数是否正确？
是否必须将JSON设置为客户端上的变量，还是小部件无需执行其他任何操作就可以完成绑定？

我是否缺少其他的东西？

我会给这个试试看，只是“算出来”但我没有很多时间花在这个解决方案上。

帮助总是赞赏。

来源

2012-02-13 Rich

是的，term是QueryString参数的名称。你所需要做的就是以预期的格式返回json数据。例如，这里是I类使用...

/// <summary> 
/// JQuery UI Autocomplete plugin expects an object with "value" and/or "label" property. 
/// </summary> 
public class AutoCompleteData 
{ 
    /// <summary> 
    /// custom property 
    /// </summary> 
    public string id { get; set; } 

    /// <summary> 
    /// value is shown in text box after selection 
    /// </summary> 
    public string value { get; set; } 

    /// <summary> 
    /// label is shown in drop down list 
    /// </summary> 
    public string label { get; set; } 
}

例如...

string term = Request.QueryString["term"]; 

AutoCompleteData[] d = GetMatchingWidgets(term) 
    .Select(x => new AutoCompleteData { 
     label = x.widgetLabel, 
     value = x.widgetValue 
    }).ToArray(); 

return jscriptSerializer.Serialize(d);

来源

2012-02-13 17:52:11 dotjoe

所以在我的例子中，对象'script'是'AutoCompleteData'的阵列？ – Rich 2012-02-13 18:02:54

是的，它会是一个Json编码的AutoCompleteData数组......但是，看着你的示例，你是想用客户端的所有数据初始化客户端并让它在客户端上搜索？我总是通过根据术语参数动态执行搜索来完成它。 – dotjoe 2012-02-13 19:11:47

fyi，如果在客户端上执行搜索，则可以使用源选项初始化插件http://docs.jquery.com/UI/Autocomplete#option-soure当标签和值不同时，我通常会使用该类，但如果它们'相同，那么我认为你也可以传递一串字符串。 – dotjoe 2012-02-13 19:15:38

使用jQuery查询远程数据源自动完成

回答

相关问题