Cannot set property '_renderItem' of undefined


Dram
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

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

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


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

Возвращает undefined

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


Dram

Попробовал версию плагина 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

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

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

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


SocFishing

Как заявляет первая линка на 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

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

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


Dram

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


divv

Упрощенный вариант, список 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>

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *