JQuery UI自动完成ui.item未定义焦点并选择

时间:2018-06-10 23:56:02

标签: javascript jquery jquery-ui cakephp autocomplete

当我尝试使用焦点或选择我的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'
        ));
        }
    }

0 个答案:

没有答案