c#이있는 asp.net 페이지에서 jQuery autocomplete 플러그인

StackOverflow https://stackoverflow.com/questions/1631226

  •  06-07-2019
  •  | 
  •  

문제

사용자가 이름을 입력하기 시작할 때 자동 완성 플러그인을 사용하여 jQuery를 작성하려고합니다 (아래 코드 참조). 사용자가 입력 한 사용자 이름을 변경하기 위해 백 스페이스를 시작하지 않는 한 코드는 정상적으로 작동하여 자동 완성 결과에서 기존 값보다 새 값을 작성하게됩니다. KeyUp 함수를 사용하여 자동 완성을 시작하거나 사용자가 백업을 시작하면 기존 자동 완성 결과를 지우는 방법이 있습니까?

다음은 default.aspx의 Markup 파일의 jQuery 코드입니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js" ></script>  
    <script type="text/javascript">
    $(document).ready(function() {
        $("#example").keyup(function() {
            $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetCustomerNames",
                    data: "{ searchParam: '" + $("#example").val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                        $("#example").autocomplete(msg.d, 
                            { scroll: false, max: 10, width: 250, selectFirst: true });
                    }  
            });
        });
    });    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>        
        Customer Name:  <input id="example" autocomplete="off" type="text" />      
    </div>
    </form>
</body>
</html>

그리고 다음은 default.aspx.cs codebehind 파일의 코드가 데이터를 반환합니다.

[WebMethod]
public static string[] GetCustomerNames(string searchParam)
{
    List<string> data = new List<string>() { "Andrew", "Ramona", "Russ", "Russell", "Raymond", "Annette", "Anthony" };

    List<string> names = new List<string>();

    foreach (string s in data)
    {
        if (s.ToLower().StartsWith(searchParam))
        {
            names.Add(s);
        }
    }

    return names.ToArray();

}
도움이 되었습니까?

해결책

나는 당신이 자동 완성 함수의 첫 번째 매개 변수로 검색 페이지를 줄 수 있다는 인상을 받았습니다.

$(document).ready(function(){
  $("#example").autocomplete("Default.aspx/GetCustomerNames", { scroll: false, max: 10, width: 250, selectFirst: true });
});

이와 비슷한 점은 원하는 작업을 수행하는 데 사용하는 올바른 옵션을 찾아야 할 수도 있지만, 적어도 각 키업 후에 자동 완성을 다시 설치하지는 않습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top