cakephp 2 上的自动完成 Ajax

Posted 2023-05-08

【中文标题】cakephp 2 上的自动完成 Ajax

【英文标题】：Autocomplete Ajax on cakephp 2

【发布时间】：2017-11-10 23:24:42

【问题描述】：

我想知道，如何在 cakephp 2 中创建自动完成功能。我在互联网上阅读，但找不到有关我的部分的相关信息。

目前我首先在控制器加载所有数据，分配给视图，然后从所有数据开始自动完成。但这效率不高并且需要时间，因为数据可能很多。如何过滤控制器功能以仅加载我在输入中键入的关键字？我可以在 PHP 级别上做到这一点，但我不知道 cakephp 2 上的方法。

这里是我在 cakephp 2 上的当前代码：

productcontroller 这会加载商店中的所有产品：

$storeproducts = $this->get_storeproduct_autocomplete($sale['Sale']['store_id']);

这是我认为的输入：

<input type="text" class="form-control" placeholder="Barcode/Nama barang..." name="search_keyword" id="searchProduct" />

在视图的底部我放了脚本：

$(function() 
        var availableProduct = [
        <?php 
        foreach ($products as $spro):
            $label = addslashes($spro['Product']['barcode'].' '.$spro['Product']['product_name']);

            ?>
             label:"<?php echo $label;?>", value:"<?php echo $spro['Product']['barcode'];?>" ,
            <?php
        endforeach;
        unset($spro);
        ?>
        ];
        $( "#searchProduct" ).autocomplete(
            source: availableProduct,
            delay: 200,
            minLength: 2
        );
    );

通过使用这些代码，自动完成功能正在工作，但它首先加载整个记录，而不是作为我输入的过滤器。并且输入字段填充了条形码，或者我设置的任何值，但我希望它显示产品名称，并且当我提交时，它得到产品 ID，我们可以这样做吗？

编辑 1： 更新我的控制器，创建新函数来执行通过 ajax 调用的数据过滤器：

public function ajax_get_autocomplete_storeproduct($keyword, $store_id)
    
        $result = array();

        $storeproducts = $this->StoreProduct->find('all', array(
            'fields'=>array('StoreProduct.id', 'StoreProduct.stok'),
            'conditions'=>array('Product.deleted'=>0, 
                                'StoreProduct.stok >'=>0, 
                                'StoreProduct.store_id'=>$store_id,
                                'OR'=>array(
                                    'Product.barcode LIKE' => "%$keyword%",
                                    'Product.product_name LIKE' => "%$keyword%",
                                )
                               )));

        //how to set the value to view ?

        return new CakeResponse(array('body'=>json_encode($result)));
    

如何设置key:value从控制器到ajax的数据响应？

【问题讨论】：

你可以使用引导自动完成

有相关的文档页面吗？

【参考方案1】：

你可以做的是，你可以在自动完成中调用 ajax 函数。因此，在页面加载时，您无需执行任何操作。但是在key type上，会调用ajax函数。

$("#searchProduct").autocomplete(
     source: function (request, response) 
          $.ajax(
              url: "add url for function call in ajax",
              dataType: "json",
              type: "post",
              data: key: value,// if you want to send any values to ajax call, you can do it here.
              success: function (data) 
                   response(data);
              
          );
      ,
      minLength: 2,
      delay: 200// im not sure why u need delay.
 );

在调用 ajax 的函数中，在那里填充数组并使用 echo json_encode($array); 以 json 格式回显数组。它会起作用的。

编辑

你的控制器函数应该是这样的

function products() 
    $array[0]['name'] = "Product - 1";
    $array[0]['price'] = 100;
    $array[1]['name'] = "Product - 2";
    $array[1]['price'] = 200;
    // like above populate all your products in to an array.

    // at last add this line
    echo json_encode($array);// this will generate key: value what you asked.

【讨论】：

Ic.. 但我如何发送数据格式键：来自控制器的值？ *我更新了我的问题 qith 更新了控制器代码？只是在控制器上查找列表？

自动完成功能不起作用，我们是否需要库来执行此操作？而不是 jQuery

我已经加载了它，我的其他 ajax 和 jquery 工作，但是当我添加脚本时，所有其他突然不工作，控制台上没有信息

控制台没有错误，输入字段没有任何反应

让我们continue this discussion in chat。