Автозаполнение Jquery с базой данных

Я не могу понять, что не так с кодом для панели поиска автозаполнения.

Единственное, о чем я могу думать, это то, что я указал не ту вещь в URL-адресе.

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

Кажется, я не могу ввести или вставить html здесь. Это просто
asp:Textbox ID="query" class="ui.autocomplete"

С# код

    [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?

Кроме того, у меня есть поисковые имена из sql server 2005.


person user1512593    schedule 27.07.2012    source источник


Ответы (2)


это не то, как работает автозаполнение jQuery,

Автозаполнение jQuery автоматически отправляет текст, введенный в текстовое поле, в место, указанное вами в «термине» строки запроса, к которому вы обращаетесь в веб-методе или обработчике, подобном этому

         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

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

РЕДАКТИРОВАТЬ:

На самом деле я никогда не делал этого в веб-методе, я обычно использую обработчик .ashx, но это должно работать так же хорошо.

когда у вас все это изменилось, запустите сайт в режиме отладки, начните вводить текстовое поле и установите f12 и посмотрите, какой трафик это вызывает - если вы наберете «abc», это должно выглядеть так

Admin_home.aspx/GetAutoCompleteData?term=abc

тогда ответ, с которым вам, возможно, придется немного поиграть, по умолчанию .net добавит "d: ...." к ответу на стороне клиента, но вы можете посмотреть его и соответствующим образом настроить

Другое редактирование:

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

это не то, что вы вставили в jquery

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

так должно быть

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

Тем не менее, еще одно редактирование:

Не хватает одной кавычки

        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))
person Scott Selby    schedule 27.07.2012
comment
да, я тоже выложу ваш JAVASCRIPT, не называйте это java - java ребята будут орать на вас - person Scott Selby; 27.07.2012
comment
Итак, что будет на месте для термина? - person user1512593; 27.07.2012
comment
оставьте эту строку в покое, jquery автоматически отправляет строку запроса с именем term - person Scott Selby; 27.07.2012
comment
Извините за поздний ответ, и спасибо за вашу помощь. Тем не менее, я ошибаюсь, потому что имя «контекст» не существует в текущем контексте. - person user1512593; 27.07.2012
comment
Мой Request.QueryString просто Джейн Блэк. Не бледно-голубой Кроме того, что вы имели в виду с текстовым полем asp:? У меня есть текстовое поле, вложенное в пару div в теле. Вы говорите, что это неправильно? - person user1512593; 27.07.2012
comment
нет, единственное, что я указывал о текстовом поле, это то, что вы написали class=ui.autocomplete , а затем в jquery вы сделали .ui-autocomplete один был «-», а другой - «.». - person Scott Selby; 27.07.2012
comment
Я вставляю javascript, который вы мне дали, в функцию SearchText() { и удаляю остальные вещи, которые у меня были, правильно? Кроме того, с источником я ссылаюсь, на какой странице я нахожусь? т. е. если код входит в Admin home.aspx, то источником будет Admin_home.aspx/GetAutoCompleteData? - person user1512593; 27.07.2012
comment
замените весь jQuery тем, что я написал, вы можете добавить к нему то, что хотите, после того, как он заработает - и источник находится там, где находится веб-метод, не имеет значения, с какой страницы вы его вызываете, вы можете использовать то же самое точный код с другой страницы aspx и используйте источник: Admin_home.aspx/GetAutoCompleteData для вашего источника - person Scott Selby; 27.07.2012
comment
давайте продолжим это обсуждение в чате - person user1512593; 28.07.2012
comment
Google использует автозаполнение jquery с ashx, обработчик ashx проще в использовании, чем веб-метод, но они оба очень похожи, и большая часть вашего кода может быть переключена туда - person Scott Selby; 30.07.2012
comment
да. Это то, что я в конечном итоге сделал. Спасибо, Скотт! - person user1512593; 30.07.2012

попробуй это может поможет

<script type="text/javascript">
    $(function() {
        $(".ui-autocomplete").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "Admin_home.aspx/GetAutoCompleteData",
                    data: "{ 'Car': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        response($.map(data.d, function(item) {
                            return {
                                value: item
                            }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 2
        });
    });
    </script>
person COLD TOLD    schedule 27.07.2012