jquery ui自動完成值不在文本框中顯示

正在處理連接到Google Search Appliance的JQuery UI自動填充小部件我已經使用Fiddler和Visual Studio 2010內置測試工具測試了小部件，並且可以驗證返回的結果來自我正在輸入的查詢。jquery ui自動完成值不在文本框中顯示

我的問題是，即使結果被返回，它們不會顯示在文本框中，目前我正在使用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處理程序的結果綁定到文本框？

來源

2013-04-30 CryoFusion87

建議你返回從源收集的數據作爲是（除非你有用於修飾的一些其他要求）至客戶端，如

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

希望這有助於。

來源

2013-04-30 11:08:40 shakib

jquery ui自動完成值不在文本框中顯示

回答

相關問題