Question

正在开发一个连接到Google Search Appliance的JQuery UI自动完成小部件我已经使用Fiddler和Visual Studio 2010内置测试工具测试了该小部件，并且可以验证我输入的查询是否返回了结果。< / p>

我的问题是即使返回结果它们也没有显示在文本框中，目前我使用JQuery和ashx web处理程序的组合来检索和显示结果，下面是JQuery的代码和处理程序：

JQuery的

<html lang="en">
<head>
<meta charset="utf-8" />
<title>GSA Autocomplete Widget</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/content/styles.css" />
<style>
   .ui-autocomplete-loading {
   background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script type="text/javascript">
    $(function () {
        var cache = {};
        $("#programmes").autocomplete({
            minLength: 2,
            source: function (request, response) {
                var term = request.term;
                if (term in cache) {
                    response(cache[term]);
                    return;
                }
                $.getJSON("handlers/Suggest.ashx", request, function (data, status, xhr) {
                   cache[term] = data;
                   response(data);
                });
           }
       });
   });
</script>
</head>
<body>
<div class="ui-widget">
<label for="programmes">Programmes: </label>
<input id="programmes" />
</div>
</body>
</html>

ASHX处理程序

public class Suggest : IHttpHandler
{
    public bool IsReusable
    {
        get { return true; }
    }

    public void ProcessRequest(HttpContext context)
    {
        if (string.IsNullOrEmpty(context.Request.QueryString[_QUERY_PARAM]))
            throw new Exception(string.Format("Could not find parameter '{0}'", _QUERY_PARAM));

        // Get the suggestion word from the parameter
        string term = context.Request.QueryString[_QUERY_PARAM];
        // Create an URL to the GSA
        string suggestionUrl = SuggestionUrl(term);
        // Call the GSA and get the GSA result as a string
        string page = GetPageAsString(suggestionUrl);
        // Convert the GSA result to Json
        string data = ConvertToJson(page);
        // Return the JSON
        context.Response.Write(data);
        context.Response.End();
    }

    private string SuggestionUrl(string term)
    {
        // You should modify this line to connect to your
        // own GSA, using the correct collection and frontend
        return "http://google4r.mc.man.ac.uk/suggest?max=10&site=mbs_collection&client=mbs_frontend&access=p&format=rich&q=" + term;
    }

    private string GetPageAsString(string address)
    {
        // Add your own error handling here
        HttpWebRequest request = WebRequest.Create(address) as HttpWebRequest;
        using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
        {
            StreamReader reader = new StreamReader(response.GetResponseStream());
            return reader.ReadToEnd();
        }
    }

    private string ConvertToJson(string gsaSuggestResult)
    {
        bool isFirst = true;
        StringBuilder sb = new StringBuilder();
        sb.Append("{ query:");
        foreach (string token in ParseGsaInput(gsaSuggestResult))
        {
            if (isFirst)
            {
                sb.AppendFormat("'{0}', suggestions:[", token.Trim());
                isFirst = false;
            }
            else
            {
                sb.AppendFormat("'{0}',", token.Trim());
            }
        }
        sb.Remove(sb.Length - 1, 1);
        sb.Append(@"]}");
        return sb.ToString();
    }

    private IEnumerable<string> ParseGsaInput(string gsaSuggestResult)
    {
        gsaSuggestResult = gsaSuggestResult.Replace("[", "").Replace("]", "").Replace("\"", "");
        return gsaSuggestResult.Split(',');
    }

    private const string _QUERY_PARAM = "term";
}

目前，JSON结果返回名称和类型。

如何将Web处理程序的结果绑定到文本框？

Answer 1

我建议您将从源收集的数据（除非您有其他一些修改要求）返回给客户端，如

public void ProcessRequest(HttpContext context)
{
    if (string.IsNullOrEmpty(context.Request.QueryString[_QUERY_PARAM]))
        throw new Exception(string.Format("Could not find parameter '{0}'", _QUERY_PARAM));

    // Get the suggestion word from the parameter
    string term = context.Request.QueryString[_QUERY_PARAM];
    // Create an URL to the GSA
    string suggestionUrl = SuggestionUrl(term);
    // Call the GSA and get the GSA result as a string
    string page = GetPageAsString(suggestionUrl);
    context.Response.Write(page);
    //Should inform about the content type to client
    context.Response.ContentType = "application/json";
    context.Response.End();
}

然后在客户端格式化根据自动完成要求的响应

$(function () {
    var cache = {};
    $("#programmes").autocomplete({
        minLength: 2,
        source: function (request, response) {
            var term = request.term;
            if (term in cache) {
                response(cache[term]);
                return;
            }
            $.getJSON("/Suggest.ashx", request, function(data, status, xhr) {
                var suggestions;

                suggestions = $.map(data.results, function(item) {
                    return { label: item.name, value: item.name };
                });
                cache[term] = suggestions;
                response(suggestions);
            });
        }
    });
});

希望这会有所帮助。

jquery ui自动完成值未在文本框中显示

1 个答案: