如何使用asp.net在jquery中创建自动完成答案

【问题标题】：How to create auto complete in jquery with asp.net如何使用asp.net在jquery中创建自动完成
【发布时间】：2012-11-20 12:11:21
【问题描述】：

我将以下代码用于自动完成功能，但我需要使用 sql server 2008 和 C# ， asp.net 从数据库中获取值。

<!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.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/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>

如何使用（EF4 和 asp.net）从我的数据库中获取该数组列表值

【问题讨论】：

标签： c# jquery asp.net sql

【解决方案1】：

第一步是创建一个 C# ASP.Net 页面，该页面生成一个自动完成插件可以解析的 JSON 结果。根据文档，您可以使用以下两种格式：

数组：数组可用于本地数据。
支持的格式有两种：字符串数组：[ "Choice1", "Choice2" ]
具有标签和值属性的对象数组： [ { label: "Choice1", value: "值1" }, ... ]

http://api.jqueryui.com/autocomplete/#option-source

或者，您可以使用函数解析出您需要的任何格式，但听起来最简单的解决方案可以满足您的需求。

我假设您使用的 ASP.Net 表单并未真正针对此类事情进行调整，但您仍然可以通过一些调整使其工作。让我们在您的 Web 应用程序根目录中创建一个名为 SearchResults.aspx 的页面。

首先要做的是清除 ASPX 文件中的所有内容，除了以下行：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchResults.aspx.cs" Inherits="ASP.Net_Forms.SearchResults" %>

然后您可以随意更改后面的代码以输出您喜欢的任何格式。在这种情况下，我们将在 Autocomplete 可以原生理解的结构中使用 JSON。我们还需要设置响应类型。

public partial class SearchResults : System.Web.UI.Page
{
    private class SomeSearchableClass
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // The autocomplete plugin defaults to using the querystring
        // parameter "term". This can be confirmed by stepping through
        // the following line of code and viewing the raw querystring.
        List<SomeSearchableClass> Results = SomeSearchSource(Request.QueryString["term"]);

        Response.ContentType = "application/json;charset=UTF-8";

        // Now we need to project our results in a structure that
        // the plugin can understand.

        var output = (from r in Results
                        select new { label = r.Name, value = r.ID }).ToList();

        // Then we need to convert it to a JSON string

        JavaScriptSerializer Serializer = new JavaScriptSerializer();
        string JSON = Serializer.Serialize(output);

        // And finally write the result to the client.

        Response.Write(JSON);
    }

    List<SomeSearchableClass> SomeSearchSource(string searchParameter)
    {
        // This is where you'd put your EF code to gather your search
        // results. I'm just hard coding these examples as a demonstration.

        List<SomeSearchableClass> ret = new List<SomeSearchableClass>();

        ret.Add(new SomeSearchableClass() { ID = 1, Name = "Watership Down" });
        ret.Add(new SomeSearchableClass() { ID = 2, Name = "Animal Farm" });
        ret.Add(new SomeSearchableClass() { ID = 3, Name = "The Plague Dogs" });

        ret = ret.Where(x => x.Name.Contains(searchParameter)).ToList();

        return ret;
    }
}

最后只需更改您的 jQuery 以使用正确的源代码：

$( "#tags" ).autocomplete({ source: "/SearchResults.aspx" });

【讨论】：

谢谢，我的 .js 文件中没有找到 $( "#tags" ).autocomplete({ source: "/SearchResults.aspx" }); 行，请指导
您发布的 HTML 中有 $( "#tags" ).autocomplete({ source: availableTags });。用我给你的那行替换它。
List SomeSearchSource(string searchParameter) searchParameter 不带参数test 它为空:(
就像我在 cmets 中所说的，仔细检查原始查询字符串以确定您的搜索词所在的查询字符串值。

【解决方案2】：

请参阅下面来自jQueryUI Autocomplete Example的示例

希望你能自己做！

您需要做的就是调用一些页面或处理程序并准备 JSON 数据。

  $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "yourpage.aspx",
                dataType: "jsonp",
                data: {

                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });

【讨论】：

谢谢，但在上述情况下，我如何创建自己的网络服务，从我的数据库表中获取数据？
真的需要网络服务吗？如果您仅通过 HTTP 使用，请尝试查看 asp.net web api
哦，我是新手，请问您能提供任何线程吗？
请看@Spencer Ruport 的回答。它使用 .aspx 页面的简单方法，而不是使用 Web 服务或 Web api