CakePHP 中的 jQuery 自动完成 JSON

Question

我正在尝试使用 CakePHP 制作 jQuery AutoComplete JSON 数据。我的代码确实有效。它按预期显示自动完成功能，但失败：

1. 一旦我们选择它（空白），所选项目就不会显示在搜索框中。
2. 如果数据不存在，则不会显示“无结果”。

代码如下：

//我的 Customer 控制器的搜索操作

function search(){

    $this->Customer->recursive = -1;

    $customers = $this->Customer->find('all', array(
        'conditions'=>array('Customer.nama LIKE'=>$this->params['url']['q'].'%'),
        'fields'=>array('id', 'name', 'telp', 'address'))
    );

    $this->set('customers', $customers);

    Configure::write('debug', 0);
    $this->layout = 'ajax';             
}

//我的 search.ctp

<?php

if(!empty($customers)) {

    $data = array();

    foreach ($customers as $customer){
        $data[] = $customer['Customer'];
    }

    echo json_encode($data);
}
else echo 'No result';

?>

//我的 js 文件

$().ready(function () {

    $("#search-txtbox").autocomplete("/customers/search",
        {
            parse: function(data){ 
                var parsed = [];
                for (var i=0; i < data.length; i++) {
                    parsed[i] = {
                        data: data[i],
                        value: data[i].name //the search item
                    };
                }
                return parsed;
            },
            formatItem: function (row, i, max) {
                var str = row.name + ' (Telp: '+ row.telp +')' + '<br />';
                str += row.address;
                return str;                     
            },
            formatResult: function (row) {
                return row.name;
            },
            minChars: 2,
            max: 0,
            width: 224,
            scrollHeight: 420,
            dataType: 'json'
        }
    );
});

请帮我修改代码。谢谢你！

Answer 1

首先，您正在使用的插件已被弃用，取而代之的是 jQueryUI，我强烈建议建议改用它（来自社区、更新等的更好支持）。但是，如果由于某种原因您必须使用该插件，那么您的问题如下：

1. 这方面的文档很少（如果有的话），但看起来 parse 函数必须返回具有插入到 input 元素中的 result 属性的对象。所以你应该只需要修改你的解析函数来添加该属性：

   解析：函数（数据）{ 
       var 解析 = [];
       for (var i=0; i < data.length; i++) {
           解析[i] = {
               数据：数据[i]，
               value: data[i].name, //搜索项
               结果：数据[i].结果
           };
       }
       返回已解析；
   },
   

2. 我不确定你想要“无结果”显示在哪里，但是你可以稍微修改你的 PHP 代码并在解析函数：

   PHP

   $data = array();
   
   foreach（$客户作为$客户）{
       $data[] = $customer['客户'];
   }
   
   回显 json_encode($data);
   

   JavaScript

   解析：函数（数据）{ 
       var 解析 = [];
       for (var i=0; i < data.length; i++) {
           解析[i] = {
               数据：数据[i]，
               value: data[i].name, //搜索项
               结果：数据[i].名称
           };
       }
       if (!parsed.length) { // <-- 对“No Results”消息执行某些操作。
           $("body").append("没有结果");
       }
       返回已解析；
   },
   

抱歉，我无法提供有效的示例。如果您想要一个使用 jQueryUI 小部件的示例，我很乐意提供一个。