使用 JQuery 进行自动完成 ASP.NET

AutoComplete Using JQuery for ASP.NET

本文关键字：ASP NET JQuery 使用      更新时间：2023-09-26

ff的例子来自 http://jqueryui.com/autocomplete/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

</body>
</html>

从这个例子中，我想在我的 ASP.NET 项目中应用它。

我担心的是，是否可以将"可用标签"的内容从代码隐藏到变量中？如果是，那么我如何将其连接到此代码以完成同样的事情？

我将不胜感激你的帮助。

谢谢！

ASPX 页的脚本部分：

<script>
$(function() {
  var availableTags = [
    <%= GetAvailableTags() %>
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});
</script>

代码隐藏：

public string GetAvaliableTags()
{
    var tags = new[] { "ActionScript", "Scheme" };
    return String.Join(",", tags.Select(x => String.Format("'"{0}'"", x)));
}

GetAvailableTags()函数的输出将在呈现时直接写入页面。

当然，这是一个"快速而肮脏"的解决方案。例如，如果您的自动完成项目包含引号等特殊字符，则必须采用不同的方法。

您可以使用 ASP.NET AJAX 页面方法作为通过 jQuery 调用的服务器端的管道来检索availableTags列表，如下所示：

<script>
    $(document).ready(function() {
        $("#tags").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    url: "YourPage.aspx/GetAutoComplete",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                    }
                });
            }
        });
    });
</script>

现在在 YourPage.aspx 上的代码隐藏中，创建 page 方法，如下所示：

[WebMethod]
public static string[] GetAutoComplete()
{
    return new[]
    {
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    };
}
相关文章：