Jquery UI自动完成值不显示在文本框中

本文关键字：显示 文本 UI Jquery | 更新日期: 2023-09-27 18:11:32

我正在研究一个JQuery UI自动完成小部件，它连接到一个谷歌搜索设备，我已经使用Fiddler和Visual Studio 2010内置的测试工具测试了这个小部件，并且可以验证结果正在从我输入的查询返回。

我的问题是，即使结果被返回，他们不显示在文本框中，目前我正在使用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>
<<p> ASHX处理器/strong> 
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处理程序到文本框?

Jquery UI自动完成值不显示在文本框中

我建议您将从源收集的数据原样返回(除非您有其他修改要求)到客户端，如

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);
            });
        }
    });
});

相关文章：