Cannot set property '_renderItem' of undefined

Dram

28 апреля 2020, 12:12

495

При добавлении к полям формы автозаполнения возникает ошибка

Cannot set property ‘_renderItem’ of undefined

Вот сам код автозаполнения

    setTimeout(function() {
        jQuery(document).ready(function($) {
            autocomplete = function(k) {
                $(k).autocomplete({
                    source: function(e, t) {
                        $.ajax({
                            'type': 'GET',
                            'url': '/index.php',
                            'dataType': 'json',
                            'data': {
                                'option': 'com_firm',
                                'view': 'item',
                                'format': 'json',
                                'task': 'searchFirm',
                                'name': $(k).val()
                            },
                            'success': function(e) {
                                t($.map(e, function(e) {
                                    return {
                                        value: e.univ,
                                    }
                                }))
                            }
                        })
                    },
                    minLength: 3,
                    select: function (t, n) {
                        $(k).val(n.item.value)
                    }
                }).data("autocomplete")._renderItem = function(e, t) {
                    return $("<li></li>")
                        .data("item.autocomplete", t)
                        .append(t.value).appendTo(e);
                }
            }
            autocomplete("#search1");
            autocomplete("#search2");
            autocomplete("#search3");
            autocomplete("#search4");
            autocomplete("#search5");
            autocomplete("#search6");
            autocomplete("#search7");
            autocomplete("#search8");
            autocomplete("#search9");
            autocomplete("#search10");

        });
    }, 1000);
</script>

Версия квери 1.8.1 + jQuery UI — v1.11.4

Пробовал гуглить и использовать замену autocomplete на ui-autocomplete, а item.autocomplete на ui-autocomplete-item — не помогает.

Что еще можно попробовать?

Aisamiery

28 апреля 2020, 12:19

Там же написано, что невозможно установить свойство _renderItem у undefined

Ваша конструкция


    $(k).autocomplete({...}).data("autocomplete") // return undefined

Возвращает undefined

Я так понимаю весь вопрос к плагину для jQuery

Dram

28 апреля 2020, 12:28

Попробовал версию плагина jQuery UI — v1.12.1

и вариант по совету отсюда https://jqueryui.com/upgrade-guide/1.10/#autocomplete

}).data(«ui-autocomplete»)._renderItem = function(e, t) {
return $(«<li></li>»).data(«ui-autocomplete-item», t).append(t.value).appendTo(e);
}
}

ошибка не пропала (

Aisamiery

28 апреля 2020, 13:04

Dram:
Попробовал версию плагина jQuery UI — v1.12.1
и вариант по совету отсюда https://jqueryui.com/upgrade-guide/1.10/#autocomplete
ошибка не пропала (

А почему она должна пропасть то? Что такое .data(‘autocomplete’) и почему у неё должно быть какое то свойство _renderItem?

На сколько я помню, функция jQuery data(‘name’) возвращает значение атрибута data-* у элемента, от куда там долженг быть объект то на выходе? Так как $(k).autocomplete({…}) врядли возвращает элемент, а тем более элемент с data-ui-autocomplete то у вас и получается на выходе undefined к которому вы обращаетесь как к объекту в попытке установить свойство _renderItem…. Учите мат часть сначала, будет сильно легче.

Вы от куда код скопировали? Дайте первоисточник

PS Даже в доке по другому, найдите 10 отличий называется


$( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
        .appendTo( ul );
    };
  } );

Dram

28 апреля 2020, 13:19

Aisamiery, скрипт автозаполнения скопировал с другого компонента своего сайта, там все работает проблем нет.

К сожалению JS не знаю, понять его не могу. Обновил в нем только название функции и компонента + добавил 10 штук autocomplete(«#search…

В данный момент на конструкции

}).data(«ui-autocomplete»)._renderItem = function(e, t) {
return $(«<li></li>»).data(«ui-autocomplete-item», t).append(t.value).appendTo(e);
}
}

Автозаполнение работает, но выдает результат первые 10 из базы. Т.е. чтобы я не вводил — получаю первые 10 результатов.

Думаю, что виновата ошибка озвученная в начале, пытаюсь методом научного тыка ее пофиксить.

Запрос для функции searchFirm писал я, вот он

SELECT * FROM `__firm` WHERE `univ` LIKE ‘%{$fullname}%’ GROUP by univ limit 10

Aisamiery

28 апреля 2020, 13:54

Dram, проверьте что в $fullname у вас на php, помимо sql инъекции там может быть просто пусто и по этому у вас будет всегда один результат, так как LIKE ‘%%’ это по сути всё что угодно

SocFishing

28 апреля 2020, 14:14

Как заявляет первая линка на stackoverflow, то с версии jQuery UI 1.10.0 были внесены правки в автозаполнение. Попробуйте использовать

}).data(«ui-autocomplete»)._renderItem = function(e, t) {

.data(«ui-autocomplete-item», t)

за место ваших аналогичных строк или подключите библиотеку jQuery UI 1.10.0 ниже этой версии.

Тут есть ряд фиксов: https://stackoverflow.com/questions/9513251/cannot-set-property-renderitem-of-undefined-jquery-ui-autocomplete-with-html

По лимиту же у вас запрос SELECT * FROM `__firm` WHERE `univ` LIKE ‘%{$fullname}%’ GROUP by univ limit 10

В котором limit 10 означает как раз таки выводить пепрвые 10 записей

Dram

28 апреля 2020, 14:35

Aisamiery, спасибо, вы были правы, не до конца отредактировал скрипт

нужно было так

‘fullname’: $(k).val()

Теперь заработало, ошибка не пропала, но все работает.

Но осталось последняя нерешенная проблема. У меня полей на странице может быть от 1 до 10 (это личный кабинет юзера и он может сам их добавлять).

Поэтому я добавил

autocomplete(«#search1»);
autocomplete(«#search2»);
autocomplete(«#search3»);
autocomplete(«#search4»);
autocomplete(«#search5»);
autocomplete(«#search6»);
autocomplete(«#search7»);
autocomplete(«#search8»);
autocomplete(«#search9»);
autocomplete(«#search10»);

Начинаю тестировать — загружается ЛК с двумя полями — #search1 и #search2 (в них автозаполнение работает).

Нажимаю кнопку добавить поле — появляется еще поле с #search3 и вот в нем и далее автозаполнение уже не работает.

Ошибка на странице все та же из первого сообщения.

———- Добавлено 28.04.2020 в 17:36 ———-

SocFishing, SQL и PHP я немного знаю, это вот с JS совсем слабо. Т.е. я знаю что такое лимит и это я сам писал запрос. На счет SQL инъекций тоже продумал.

tommy-gung

28 апреля 2020, 14:40

вызывай autocomplete(«поле»); после создания этого поля

Dram

28 апреля 2020, 14:44

tommy-gung, спасибо! получилось!

divv

28 апреля 2020, 15:23

Упрощенный вариант, список li формируется в php обработчике



<input class="search" data-id="1" type="text" name="search" value="">
<div class="result_1"></div>

<input class="search" data-id="2" type="text" name="search" value="">
<div class="result_2"></div>

<input class="search" data-id="3" type="text" name="search" value="">
<div class="result_3"></div>


<script>
jQuery(function($) {
    $(".search").keyup(function() {
        var key = $(this).val();
		var id = $(this).data('id');		
		if(key.length < 4 ) {
					return;
				}
        $.ajax({
            type: "POST",
          'url': '/index.php',
            data: {  'key': key },
            success: function(data) {
                $(".result_" + id).html(data);
            }
        });
    });
 });
</script>

Похожие записи:

Добавить комментарий Отменить ответ