none
ASP.NET MVC jquery autocomplete RRS feed

  • Вопрос

  • Добрый день. Не смотря, на то, что в интернете не мало информации на тему использования плагина autocomplete, возникло не приятное затруднение. Скрипт на странице

    <script type="text/javascript">
        (function ($) {
            $(document).ready(
                function () {
                    $.ajaxSetup({ type: "Post" });
                    $('#Company').autocomplete('@Url.Action("GetListForAutoComplite", "Company")', {
                        dataType: 'json',
                        parse: function (data) {
                            var rows = new Array();
                            for (var i = 0; i < data.length; i++) {
                                rows[i] = { data: data[i], value: data[i].CompanyID, result: data[i].Name, CompanyID: data[i].CompanyID };
                            }
                            return rows;
                        },
                        formatItem: function (row) {
                            return row.Name;
                        },
                        delay: 10,
                        minChars: 2
                    }).result(function (event, row) {
                        $("#CompanyID").val(row.CompanyID);
                    });
                });
        }(jQuery))
    </script>

    Код на сервере:

            [HttpPost]
            public JsonResult GetListForAutoComplite(string q)
            {
                var company = Json(from t in context.Company
                                    where t.Name.ToUpper().Contains(q.ToUpper())
                                    select new { t.CompanyID, t.Name });
    
    
                return company;
            

    Запрос на сервер идет после 3х введенных символов и выводит результат, все бы хорошо, но при продолжении ввода запрос на сервер больше не отправляется и как следствие не обновляются подсказки.

    Побывал различные настройки плагина, но к нужному результату не привело.

    Спасибо.

    14 ноября 2012 г. 10:48

Ответы

  • Для того, чтобы запрос уходил каждый раз, когда вы набираете данные, нужно чтобы свойству source была присвоена callback-функция - а из неё уже и должен делаться ajax запрос.  

    source: FunctionObject request, Function response( Object data ) )

     http://api.jqueryui.com/autocomplete/ - смотрите описание опции виджета source. 

    Лично у меня работает вот так:

    $('#search_person').autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "http://" + location.host + "/FileArchive/FileArchive.aspx/SearchPerson",
                            data: "{ 'namePart': '" + request.term + "', 'maxRows': '15' }",
                            dataType: "json",
                            async: false,
                            success: function (data) {
                                var persons = Sys.Serialization.JavaScriptSerializer.deserialize(data.d);
    
                                var response_data = new Array();
    
                                var person_index = 0;
                                var rest_person_count = persons.length;
    
                                while (rest_person_count--) {
    
                                    var person = persons[person_index];
    
                                    var found_name_part = person.UserName;
    
    
                                    if (-1 != person.Name.indexOf(request.term)) {
                                        found_name_part = person.Name;
                                    }
                                    else if (0 == person.FirstName.indexOf(request.term)) {
                                        found_name_part = person.FirstName + ' (' + person.UserName + ')';
                                    }
                                    else if (0 == person.UserName.indexOf(request.term)) {
                                        found_name_part = person.UserName;
                                    } 
                                    else if (0 == person.LastName.indexOf(request.term)) {
                                        found_name_part = person.LastName + ' (' + person.UserName + ')';
                                    } 
                                    else if (0 == person.MiddleName.indexOf(request.term)) {
                                        found_name_part = person.MiddleName + ' (' + person.UserName + ')';
                                    }
                                    var found_person = new Object({
                                        PersonId: person.Id,
                                        label: found_name_part,
                                        value: found_name_part
    
                                    });
                                    response_data.push(found_person);
                                    person_index++;
                                }
                                response(response_data);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert(textStatus + ': ' + errorThrown);
                            }
                        });
                    },
                    minLength: 2,
                    select: function (event, ui) {
                        $(this).prev().val(ui.item.PersonId);
                    }
                });



    • Изменено A.G.Sedov 15 ноября 2012 г. 10:59
    • Помечено в качестве ответа Sumv 15 ноября 2012 г. 12:31
    15 ноября 2012 г. 10:48

Все ответы

  • А запрос точно не идёт, может с сервера ничего не возвращается? Вы в отладчике смотрели, серверный код отрабатывает?
    14 ноября 2012 г. 13:54
    Модератор
  • Я ставил точку останова на метод, и вход в неё осуществляется только при первой отправки.
    15 ноября 2012 г. 7:05
  • Для того, чтобы запрос уходил каждый раз, когда вы набираете данные, нужно чтобы свойству source была присвоена callback-функция - а из неё уже и должен делаться ajax запрос.  

    source: FunctionObject request, Function response( Object data ) )

     http://api.jqueryui.com/autocomplete/ - смотрите описание опции виджета source. 

    Лично у меня работает вот так:

    $('#search_person').autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "http://" + location.host + "/FileArchive/FileArchive.aspx/SearchPerson",
                            data: "{ 'namePart': '" + request.term + "', 'maxRows': '15' }",
                            dataType: "json",
                            async: false,
                            success: function (data) {
                                var persons = Sys.Serialization.JavaScriptSerializer.deserialize(data.d);
    
                                var response_data = new Array();
    
                                var person_index = 0;
                                var rest_person_count = persons.length;
    
                                while (rest_person_count--) {
    
                                    var person = persons[person_index];
    
                                    var found_name_part = person.UserName;
    
    
                                    if (-1 != person.Name.indexOf(request.term)) {
                                        found_name_part = person.Name;
                                    }
                                    else if (0 == person.FirstName.indexOf(request.term)) {
                                        found_name_part = person.FirstName + ' (' + person.UserName + ')';
                                    }
                                    else if (0 == person.UserName.indexOf(request.term)) {
                                        found_name_part = person.UserName;
                                    } 
                                    else if (0 == person.LastName.indexOf(request.term)) {
                                        found_name_part = person.LastName + ' (' + person.UserName + ')';
                                    } 
                                    else if (0 == person.MiddleName.indexOf(request.term)) {
                                        found_name_part = person.MiddleName + ' (' + person.UserName + ')';
                                    }
                                    var found_person = new Object({
                                        PersonId: person.Id,
                                        label: found_name_part,
                                        value: found_name_part
    
                                    });
                                    response_data.push(found_person);
                                    person_index++;
                                }
                                response(response_data);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert(textStatus + ': ' + errorThrown);
                            }
                        });
                    },
                    minLength: 2,
                    select: function (event, ui) {
                        $(this).prev().val(ui.item.PersonId);
                    }
                });



    • Изменено A.G.Sedov 15 ноября 2012 г. 10:59
    • Помечено в качестве ответа Sumv 15 ноября 2012 г. 12:31
    15 ноября 2012 г. 10:48
  • Все действительно так, спасибо.
    15 ноября 2012 г. 12:30