핸들러를 사용하여 JQuery 자동 완성

Question

자동 완성 속성을 사용하고 핸들러를 사용하여 검색 상자를 만들려고합니다. 데이터베이스에서 모든 단어를 가져 왔지만 표시 할 수는 없습니다.

그것 JQuery와 부분 :

$(function() { 
    $("#search-box").autocomplete({ 
     source: "KeywordHandler.ashx", 
     minLength: 1, 
     @*select: function (event, ui) { 
      alert(ui.item.id + "/" + ui.item.value); 
     }*@ 
    }); 
}); 

그것 핸들러 부분 :

public class KeywordHandler : IHttpHandler 
{ 

    public void ProcessRequest(HttpContext context) 
    { 
     string prefixText = context.Request.QueryString["term"]; 
     using (SqlConnection conn = new SqlConnection()) 
     { 
      conn.ConnectionString = ConfigurationManager.ConnectionStrings["DSN"].ConnectionString; 

      using (SqlCommand cmd = new SqlCommand()) 
      { 

       cmd.CommandText = "select Keyword from [dbo].[Log] where " + "Keyword like @SearchText + '%'"; 
       cmd.Parameters.AddWithValue("@SearchText", prefixText); 
       cmd.Connection = conn; 

       StringBuilder sb = new StringBuilder(); 
       conn.Open(); 
       using (SqlDataReader sdr = cmd.ExecuteReader()) 
       { 
        while (sdr.Read()) 
        { 
         sb.Append(sdr["Keyword"]) 
          .Append(Environment.NewLine); 
        } 
       } 
       conn.Close(); 
       context.Response.Write(sb.ToString()); 
      } 
     } 
    } 

    public bool IsReusable 
    { 
     get 
     { 
      return false; 
     } 
    } 
} 

핸들러에서, 내가 필요하지만 제공되는 키워드로 표시 할 수 없습니다 모든 단어를 얻을 수 있습니다 검색 창에.

어떤 아이디어가 있습니까?

Answer 1

는 난 단지 키워드 클래스를 추가하고 돌아왔다.

그리고 작동합니다.

public class KeywordHandler : IHttpHandler 
{ 
    class Keyword 
    { 
     public string value { get; set; } 
    } 

    public void ProcessRequest(HttpContext context) 
    { 
     string prefixText = context.Request.QueryString["term"]; 
     using (SqlConnection conn = new SqlConnection()) 
     { 
      conn.ConnectionString = ConfigurationManager.ConnectionStrings["DSN"].ConnectionString; 

      using (SqlCommand cmd = new SqlCommand()) 
      { 

       cmd.CommandText = "select distinct Keyword from [dbo].[Log] where " + "Keyword like @SearchText + '%' and ResultCount != 0"; 
       cmd.Parameters.AddWithValue("@SearchText", prefixText); 
       cmd.Connection = conn; 

       List<Keyword> suggestedList = new List<Keyword>(); 
       conn.Open(); 
       using (SqlDataReader sdr = cmd.ExecuteReader()) 
       { 
        while (sdr.Read()) 
        { 
         suggestedList.Add(new Keyword { value = sdr["Keyword"].ToString() }); 
        } 
       } 
       conn.Close(); 

       suggestedList.OrderBy(x => x.value).ToList(); 

       context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(suggestedList.Take(10))); 
      } 
     } 
    } 

    public bool IsReusable 
    { 
     get 
     { 
      return false; 
     } 
    } 
} 

Answer 2

다음과 같이 사용할 수 있습니다. "새로 고침"부분에주의하십시오. 쿼리 결과를 webservice에서 JSON으로 반환하고 파싱해야합니다. 구문 분석 후에 JQuery 코드 (코드의 마지막 부분)에 표시된대로 모든 검색 결과 항목에 대한 목록 항목을 만들 수 있습니다.

* 나는 당신이 당신의 서비스에서 결과를 제대로 얻고 있다고 가정하고 나의 대답을 썼다.

HTML

<div id="assignDiv" style="display:none;"> 
       <div data-demo-html="true" data-demo-js="true" data-demo-css="true"> 
        <h3>Select contact:</h3>      
        <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search contact..." data-filter-theme="d"></ul> 
       </div> 

       <input type="button" value="Send to selected contact" id="assignToBtn" /> 
      </div> 

JQuery와

$("#autocomplete").on("listviewbeforefilter", function (e, data) { 
     var $ul = $(this), 
      $input = $(data.input), 
      value = $input.val(), 
      html = ""; 
     $ul.html(""); 
     if (value && value.length > 2) { 
      $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>"); 
      $ul.listview("refresh"); 

      $.ajax({ 
       type: "POST", 
       crossDomain: true, 
       url: serverAddress + "General.asmx/AutoComplete", 
       data: "{'q': '" + $input.val() + "'}", 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json' 
      }) 
      .then(function (response) { 
       var JsonObj = jQuery.parseJSON(response.d); 

       $.each(JsonObj, function (i, val) { 
        html += "<li><a href='javascript:changeAutoCompleteText(\"" + val + "\");'>" + val + "&nbsp;<i style='color:grey;font-weight:lighter;'>(</i><i style='text-decoration:underline;color:grey;font-weight:lighter;'>" + val + "</i><i style='color:grey;font-weight:lighter;'>)</i></a></li>"; 
       }); 
       $ul.html(html); 
       $ul.listview("refresh"); 
       $ul.trigger("updatelayout"); 
      }); 
     } 
    });