0
Google 검색 어플라이언스에 연결되는 JQuery UI 자동 완성 위젯 Fiddler 및 Visual Studio 2010 inbuilt 테스트 도구를 사용하여 위젯을 테스트했으며 결과가 반환되는지 확인할 수 있습니다. 내가 입력하는 쿼리에서jquery ui 자동 완성 값이 텍스트 상자에 표시되지 않음
내 문제는 텍스트 상자에 결과가 반환되지 않아도 현재는 JQuery와 ashx 웹 처리기 조합을 사용하여 결과를 검색하고 표시한다는 것입니다. 아래는 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";
}
가3210
현재 JSON 결과는 이름과 유형을 반환합니다.
웹 핸들러의 결과를 텍스트 상자에 바인딩하는 방법은 무엇입니까?