当我尝试使用焦点或选择我的jquery自动完成功能时,我总是将ui.item视为未定义,即使我从自动完成加载了结果。 这很奇怪,因为我在另一个页面中有这个确切的功能。我不确定为什么它没有定义,因为我有结果。 我正在使用CakePHP 3.4,并在下面附加了相关的视图和控制器功能。 我正在使用jquery 3.3.1和jquery ui 1.12.1。
这是我将鼠标放在列表项上时收到的错误消息。
add:539 Uncaught TypeError: Cannot read property '0' of undefined
at HTMLInputElement.focus (add:539)
at $.(anonymous function).(anonymous function)._trigger (https://code.jquery.com/ui/1.12.1/jquery-ui.js:697:13)
at $.(anonymous function).(anonymous function).menufocus (https://code.jquery.com/ui/1.12.1/jquery-ui.js:5827:25)
at HTMLUListElement.handlerProxy (jquery-ui.js:606)
at HTMLUListElement.dispatch (VM118502 jquery-3.3.1.js:5183)
at HTMLUListElement.elemData.handle (VM118502 jquery-3.3.1.js:4991)
at Object.trigger (VM118502 jquery-3.3.1.js:8249)
at HTMLUListElement.<anonymous> (VM118502 jquery-3.3.1.js:8327)
at Function.each (VM118502 jquery-3.3.1.js:354)
at jQuery.fn.init.each (VM118502 jquery-3.3.1.js:189)
focus @ add:539
_trigger @ jquery-ui.js:697
menufocus @ jquery-ui.js:5827
handlerProxy @ jquery-ui.js:606
dispatch @ jquery-3.3.1.js:5183
elemData.handle @ jquery-3.3.1.js:4991
trigger @ jquery-3.3.1.js:8249
(anonymous) @ jquery-3.3.1.js:8327
each @ jquery-3.3.1.js:354
each @ jquery-3.3.1.js:189
trigger @ jquery-3.3.1.js:8326
_trigger @ jquery-ui.js:695
focus @ jquery-ui.js:5318
(anonymous) @ jquery-ui.js:144
mouseenter .ui-menu-item @ jquery-ui.js:5035
handlerProxy @ jquery-ui.js:606
handle @ jquery-3.3.1.js:5536
dispatch @ jquery-3.3.1.js:5183
elemData.handle @ jquery-3.3.1.js:4991
trigger @ jquery-3.3.1.js:8249
(anonymous) @ jquery-3.3.1.js:8327
each @ jquery-3.3.1.js:354
each @ jquery-3.3.1.js:189
trigger @ jquery-3.3.1.js:8326
(anonymous) @ jquery-ui.js:5819
fn @ jquery-3.3.1.js:4932
dispatch @ jquery-3.3.1.js:5183
elemData.handle @ jquery-3.3.1.js:4991
这是发票的add.ctp,自动完成的脚本位于底部
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<?php echo $this->Html->css('//code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css'); ?>
<?php use Cake\Routing\Router; ?>
<?= $this->Form->create($invoice) ?>
<fieldset>
<?php
echo $this->Form->input('id', ['type' => 'hidden', 'id'=>'id']);
echo $this->Form->hidden('invoice_to_id', ['options' => $customers, 'empty' => true,'id'=>'customers']);
echo $this->Form->input('name', ['type' => 'text', 'id'=>'name', 'label'=>'Invoice to Customer']);
echo $this->Form->input('invoice_address', ['type' => 'text', 'id'=>'invoice_to_address']);
?>
</div>
</fieldset>
<?= $this->Form->button(__('Submit')) ?>
<?= $this->Form->end() ?>
<script>
jQuery('#name').autocomplete({
delay: 0,
minLength: 2,
source: '<?php echo Router::url(array('controller' => 'Customers', 'action' => 'Search')); ?>',
focus: function( event, ui ) {
console.log("%o", ui.item); //always seems to be undefined even results show
$( "#name" ).val( ui.item[0] );
return false;
},
select: function( event, ui ) {
$( "#invoice_to_address" ).val( ui.item[1] );
$( "#ship_to_address" ).val( ui.item[2] );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item[0] + "</div>" )
.appendTo( ul );
};
</script>
这是我的客户控制器搜索功能。
public function search()
{
if ($this->request->is('ajax'))
{
$name = $this->request->query['term'];
$resultArr = $this->Customers
->find()
->where(
['Customers.name LIKE' => ('%' . $name . '%')]
);
$resultsArr = [];
foreach ($resultArr as $result)
{
$resultsArr[] = [$result['name'], $result['address'], $result['postal_address'], $result['currency_id'], $result['gst_percentage']];
}
$this->set(array(
'name' => $resultsArr,
'_serialize' => 'name'
));
}
}