jQuery的自动完成与数据库 [英] Jquery AutoComplete with database

问题描述

我似乎无法弄清楚什么是错的code的自动完成搜索栏。

I cannot seem to figure out what is wrong with the code for the autocomplete search bar.

我能想到的唯一的事情是，我引用的URL下错误的事情

The only thing I can think of is that I referenced the wrong thing under URL

ASPX的Javascript

aspx Javascript

    $(document).ready(function() {
        SearchText();
    });
    function SearchText() {
        $(".ui-autocomplete").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Admin_home.aspx/GetAutoCompleteData",
                    data: "{'Car':'" + document.getElementById('query').value + "'}",
                    dataType: "json",
                    success: function(data) {
                        response(data.d);
                    },
                    Error: function(results) {
                        alert("Error");
                    }
                });
            }
        });
    }

</script>`

ASPX HTML code

aspx html code

我似乎无法在此输入或粘贴HTML。这仅仅是一个结果
ASP：文本框ID =查询类=ui.autocomplete

I cant seem to type or paste the html here. It is just a
asp:Textbox ID="query" class="ui.autocomplete"

C＃code

    [WebMethod]
    public static List<string> GetAutoCompleteData(string Car)
    {
        List<string> result = new List<string>();
        using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["CarsConnectionString"].ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("select DISTINCT Car from T_Car where Car like '%'+ @SearchText +'%", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@SearchText", Car);
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    result.Add(dr["Car"].ToString());
                }
                return result;
            }
        }
    }

在html会部分需要被包装在一个AJAX更新面板？

Would part of the html need to be wrapped in an AJAX update panel?

另外，我有搜索从SQL Server 2005中提取姓名。

Also, I am having the search pull names from sql server 2005.

推荐答案

这是不是jQuery的自动完成功能是如何工作的，

that is not how jQuery Autocomplete works,

jQuery的自动完成自动发送的文本框中您在查询字符串指定位置输入文本任期你访问它的WebMethod或处理这样的

jQuery autocomplete automatically sends the text entered in the text box to the location you specify in a querystring "term" you access it in webmethod or handler like this

         string input = HttpContext.Current.Request.QueryString["term"];

像这样

              [WebMethod]
public static List<string> GetAutoCompleteData(string Car)
{
    string input = HttpContext.Current.Request.QueryString["term"];
    List<string> result = new List<string>();
    using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["CarsConnectionString"].ConnectionString))
    {
        using (SqlCommand cmd = new SqlCommand("select DISTINCT Car from T_Car where Car like '%'+ @SearchText +'%", con))
        {
            con.Open();
            cmd.Parameters.AddWithValue("@SearchText", input);
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                result.Add(dr["Car"].ToString());
            }
            return result;
        }
    }
}

这正好在.aspx页面

this goes in your .aspx page

    $(".ui-autocomplete").autocomplete({
        source: "Admin_home.aspx/GetAutoCompleteData",
        select: function (event, ui) { }
      });

编辑：

我从来没有真正的Web方式做到了这一点，我通常使用的处理程序.ashx的，但这应该工作一样好。

I've never actually done this in web method , I usually use a handler .ashx , but this should work just as good.

当你一切都改变了，然后运行在调试模式下的网站，开始在文本框中键入和适合F12和观看，这是造成交通 - 如果你输入ABC它应该看起来像

when you have all that changed , then run the site in debug mode, start to type in the textbox and fit f12 and watch the traffic that this is causing - if you type "abc" it should look like

Admin_home.aspx / GetAutoCompleteData？长期= ABC

Admin_home.aspx/GetAutoCompleteData?term=abc

，那么你可能有一点玩，默认情况下.NET的响应是要加D：......，以应对客户端，但你可以看它，accordinly调整

then the response you might have to play with a little , by default .net is going to add "d : ...." to the response to client side , but you can watch it and adjust accordinly

另一个编辑：

         <asp:Textbox ID="query" class="ui.autocomplete">

是不是你放什么在jQuery的

is not what you put in the jquery

          $(".ui-autocomplete").autocomplete({

应该是

         <asp:Textbox ID="query" class="ui-autocomplete">

然而，另一个编辑：

Yet, Another

这是缺少一个单引号

        using (SqlCommand cmd = new SqlCommand("select DISTINCT Car from T_Car where Car like '%'+ @SearchText +'%", con))

替换为

         using (SqlCommand cmd = new SqlCommand("select DISTINCT Car from T_Car where Car like '%'+ @SearchText +'%' ", con))

这篇关于jQuery的自动完成与数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！