jQuery 자동 완성 및 ASP.NET

jQuery 자동 완성 및 ASP.NET

저는 이 사이트와 웹에서 jQuery와 ASP를 사용하여 자동 완성의 좋고 간단한 예를 찾아보았습니다.NET. 웹 서비스를 통해 자동 완성하는 데 사용되는 데이터를 노출하고 싶었습니다(아마도 다음에 그렇게 할 것입니다).그러는 동안에, 이 일을 해냈어요, 하지만 좀 이상한 것 같아요...

내 페이지에는 다음과 같은 텍스트 상자가 있습니다.

<input id="txtSearch" type="text" />

예에 따라 설정된 jQuery autocomplete를 사용합니다.

<link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

여기서부터 점점 더 까다로워지기 시작하는...웹 서비스 대신 페이지를 호출합니다.

  <script type="text/javascript">
    $(document).ready(function(){
        $("#txtSearch").autocomplete('autocompletetagdata.aspx');
    });      
  </script>

페이지에서 html을 모두 제거하고 다음과 같이 표시합니다(그렇지 않으면 다양한 HTML 비트가 자동 완성 드롭다운에 표시됨).

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="autocompletetagdata.aspx.cs" Inherits="autocompletetagdata" %>

또한 autocompletetagdata.aspx에서 SubSonic을 사용하여 데이터베이스에서 데이터를 쿼리, 포맷 및 반환합니다(한 줄에 하나의 데이터 항목).

protected void Page_Load(object sender, EventArgs e)
{
    // Note the query strings passed by jquery autocomplete:
    //QueryString: {q=a&limit=150&timestamp=1227198175320}

    LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
        .Top(Request.QueryString["limit"])
        .Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%")
        .OrderAsc(LookupTag.Columns.TagDescription)
        .ExecuteAsCollection<LookupTagCollection>();

    StringBuilder sb = new StringBuilder();

    foreach (LookupTag tag in tags)
    {
        sb.Append(tag.TagDescription).Append("\n");
    }

    Response.Write(sb.ToString());
}

LIKE 쿼리를 수행하지 않으면 입력한 문자와 일치하는 내용이 모두 반환됩니다. 예를 들어, "a"를 입력하면 "Ask"와 "Answer"는 물론 "March"와 "Mega"도 포함됩니다.저는 그냥 경기를 시작하고 싶었어요.

어쨌든 작동도 되고 설정도 꽤 쉽지만, 더 좋은 방법이 있을까요?

최근에 자동 완성 기능을 구현했는데, 상당히 비슷하게 생겼습니다.저는 aspx 대신 ashx(Generic Handler)를 사용하고 있지만, 기본적으로 뒤에 있는 코드와 같습니다.

asx를 사용하면 다음과 같습니다.

<script type="text/javascript">
  $(document).ready(function(){
      $("#txtSearch").autocomplete('autocompletetagdata.ashx');
  });      
</script>

[WebService(Namespace = "http://www.yoursite.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutocompleteTagData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        // Note the query strings passed by jquery autocomplete:
        //QueryString: {q=a&limit=150&timestamp=1227198175320}

        LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
            .Top(context.Request.QueryString["limit"])
            .Where(LookupTag.Columns.TagDescription).Like(context.Request.QueryString["q"] + "%")
            .OrderAsc(LookupTag.Columns.TagDescription)
            .ExecuteAsCollection<LookupTagCollection>();

        foreach (LookupTag tag in tags)
        {
            context.Response.Write(tag.TagDescription + Environment.NewLine);
        }
    }

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

방금 다른 질문에 올렸지만 jQuery 자동 완성 플러그인에서 구문 분석 기능을 재정의하여 모든 출력을 지원할 수 있습니다.

예:

    $("#<%= TextBox1.ClientID %>").autocomplete("/Demo/WebSvc.asmx/SuggestCustomers", {
        parse: function(data) {
            var parsed = [];

            $(data).find("string").each(function() {
                parsed[parsed.length] = {
                    data: [$(this).text()],
                    value: $(this).text(),
                    result: [$(this).text()]
                };
            });
            return parsed;
        },
        dataType: "xml"
    });

XML에 대한 문자열 배열만 예상됩니다.아주 쉽게 할 수 있는...SubSonic을 사용하는 경우 REST Handler(숨겨진 GEM입니다!!!)를 확인해야 합니다. REST Handler는 모든 개체에 대한 기본 쿼리를 지원하며 JSON/XML을 반환할 수 있습니다. 여기 이를 사용한 쿼리 예제가 있습니다.

/Demo/services/Customers/list.xml?고객 이름=JOHN

list.xml을 list.json으로 변경하면 결과가 JSON으로 변경됩니다.위의 요청은 강력한 형식의 "고객" 엔티티를 반환합니다.LIKE, NOT LIKE 등을 지원하도록 파라미터를 변경할 수 있습니다.매우 강력하고 모든 배관이 잘 되어 있습니다...

여기 비디오가 있습니다: http://subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/ .

웹 서비스 또는 WCF 서비스는 더 나은 인터페이스의 가능성을 제공합니다.둘 다 Json 직렬화를 수행하도록 설정할 수도 있습니다.

WCF 수업은 글을 쓰면서 듣고 있기 때문에(휴식 중이라, 정말!) WCF 방법을 스케치하겠습니다.

[OperationContract]
[WebInvoke(RequestFormat=WebMessageFormat.Json,
           ResponseFormat=WebMessageFormat.Json)]
public LookupTagCollection LookupTags( int limit, string q )
{
     return Select.AllColumnsFrom<LookupTag>()
                  .Top(limit)
                  .Where(LookupTag.Columns.TagDescription)
                  .Like(q+ "%")
                  .OrderAs(LookupTag.Columns.TagDescription)
                  .ExecuteAsCollection<LookupTagCollection>();    
}

LookupTagCollection은 직렬화 가능해야 합니다.

Jquery 1.8 자동 완성은 쿼리 문자열 매개 변수로 "q"가 아닌 "용어"를 사용합니다.이것은 제가 구현한 짧고 달콤한 버전입니다.이것이 누군가에게 도움이 되기를 바랍니다.

Javascript:

$(function () {
    $("#autocomplete").autocomplete({
        source: "/pathtohandler/handler.ashx",
        minLength: 1,
        select: function (event, ui) {
            $(this).val(ui.item.value);
        }
    });
});

ASHX 핸들러:

public class SearchHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var term = context.Request.QueryString["term"].ToString();

        context.Response.Clear();
        context.Response.ContentType = "application/json";

        var search = //TODO implement select logic based on the term above

        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        string json = jsSerializer.Serialize(search);
        context.Response.Write(json);
        context.Response.End();
    }

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

언급URL : https://stackoverflow.com/questions/305994/jquery-autocomplete-and-asp-net