jQuery AutoComplete не отображается - PullRequest
Новая
       10

jQuery AutoComplete не отображается

12 голосов
/ 14 сентября 2010

В диалоге jquery я хотел бы использовать функцию автозаполнения jquery в jqueryUI.

Затем я подготовил действие в моем контроллере (я использую ASP.NET MVC2) следующим образом 

public ActionResult GetForos(string startsWith, int pageSize)
{
    // get records from underlying store
    int totalCount = 0;
    string whereClause = "Foro Like '" + startsWith + "%'";
    List<Foro> allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount);

    //transform records in form of Json data
    List<ForoModelWS> foros = new List<ForoModelWS>();
    foreach ( Foro f in allForos)
        foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId), 
            text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name });

    return Json(foros);
}

Класс ForoModelWS - это простой класс, используемый только для хранения данных, которые должны быть переданы в json. Вот оно 

public class ForoModelWS
{
    public string id;
    public string text;
}

На стороне клиента у меня есть следующий код jquery: 

<input id="theForo" />

<script type="text/javascript">
    $(document).ready(function() {

        $("#theForo").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "post",
                    url: "/Foro/GetForos",
                    dataType: "json",
                    data: {
                        startsWith: request.term,
                        pageSize: 15
                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                label: item.text,
                                value: item.text
                            }
                        }))
                    }
                })
            },
            minLength: 2,
            select: function(event, ui) {
            },
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });

    });
</script>

Но скользящее окно с предложениями не появляется. Если я добавлю предупреждение в функцию ответа, я смогу увидеть правильные данные.

Я что-то пропустил?

Спасибо за помощь

1-е РЕДАКТИРОВАНИЕ : Кроме того, Как изменить код для использования свойства «id» выбранного элемента в возвращаемом списке?

2-е РЕДАКТИРОВАНИЕ : Я проверил больше с Chrome Developer Tool и увидел, что при запуске автозаполнения появляются некоторые ошибки. следующее: 

Uncaught TypeError: Cannot call method 'zIndex' of undefined  @ _assets/js/jquery-ui-1.8.4.custom.min.js:317
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320

Кажется, что плагин автозаполнения не находит элемент, когда он пытается установить z-Index скользящего предложения 1 на уровень выше своего контейнера. Первая ошибка появляется при открытии диалогового окна jquery UI. Ввод для автозаполнения находится на вкладке jquery, которая находится в диалоге jquery

3-е РЕДАКТИРОВАНИЕ : Я добавляю разметку HTML, чтобы завершить 

<td width="40%">
   <%= Html.LabelFor(model => model.ForoID)%>
   <br />
   <%= Html.HiddenFor(model => model.ForoID) %>
   <input id="theForo" />
   <%= Html.ValidationMessageFor(model => model.ForoID, "*")%>
</td>

Ответы [ 5 ]

6 голосов
/ 24 сентября 2010

Я нашел проблему.

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

Этот плагин был включен в конец моих скриптов и вызвал ошибку, описанную в вопросе. Я удалил плагин, и все работает очень хорошо.

Перед удалением я попытался также выделить проблему, вставив статический html в оба сценария. Я обнаружил, что даже простейшее использование функций автозаполнения, таких как 

<script type="text/javascript">
$(document).ready(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"];

    $("#theForo").autocomplete({
        source: availableTags
    });
});
</script>

приведет к ошибке, которую я получил.

Мой выбор был удалить плагин меню, даже если этот код больше не поддерживается.

Спасибо!

5 голосов
/ 06 апреля 2012

Это обсуждение действительно старое, однако добавьте его сюда на всякий случай, если оно кому-нибудь поможет ... Если автозаполнение вообще не работает, так как в раскрывающемся списке не отображается, то сначала проверьте его с самой трудной формой.закодированные предложения, как показано ниже. 

$("#txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });

Если это не работает, то это проблема связанных скриптов jquery.В моем случае jquery.min.js был более старой версией 1.7.1, тогда как все остальные скрипты были 1.8.18.

Простая замена правильной версии скрипта решила проблему.

Надеюсь, это поможеткто-то спотыкается с основной проблемой заставить автозаполнение работать.

2 голосов
/ 14 сентября 2010

Так же, как я ответил здесь , посмотрите на мой рабочий пример автозаполнения пользовательского интерфейса jQuery.Обратите внимание на часть source.Надеюсь, это поможет: 

    var cache = {};
    $("#textbox").autocomplete({
      source: function(request, response) {
       if (request.term in cache) {
        response($.map(cache[request.term].d, function(item) {
         return { value: item.value, id: item.id }
        }))
        return;
       }
       $.ajax({
        url: "/Services/AutoCompleteService.asmx/GetEmployees",  /* I use a web service */
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function(data) { return data; },
        success: function(data) {
         cache[request.term] = data;
         response($.map(data.d, function(item) {
          return {
           value: item.value,
           id: item.id
          }
         }))
        },
        error: HandleAjaxError  // custom method
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item);   // custom method
       }
      }
     });

Если вы сейчас этого не делаете, получите Firebug .Это бесценный инструмент для веб-разработки.Вы можете установить точку останова на этом JavaScript и посмотреть, что произойдет.

1 голос
/ 28 мая 2012

fgmenu Использование меню функций () И автозаполнение Использование функции

В имени функции такие же проблемы возникают

Вы можете изменить имя функции в файле fgmenu.js

. 
  $('#hierarchybreadcrumb6').menuA({content: $('#hierarchybreadcrumb6').next().html(),backLink: false});
0 голосов
/ 20 июля 2011

на основе ответа Лоренцо, я изменил 

$.fn.fgmenu = function(options) { ...

на 

$.fn.fgmenu = function(options) { ...

из этих плагинов menu , и он работал нормально (как автозаполнение, так и плагин меню)

...