Question

我有一个输入字段，我正在变成jqueryUI自动完成：

$( "#autocomplete" ).autocomplete({
    autoFocus: true,
    source: mylist
 });

mylist变量只是数组格式['Value1','Value2,'Blah']中的一个字符串，我最初只是硬编码到脚本中。

现在我希望mylist变量是我的cakephp应用程序中对函数的ajax调用的结果。该函数基本上如下，它只是将所有数据作为列表抓取，json对其进行编码。

public function source() {
    $this->layout = 'ajax';
    $countries=$this->Country->find('list',array('fields'=>'Country.country'));
    ChromePhp::log($countries);
    echo json_encode($countries);
}

输出：

{"1":"Afghanistan","2":"Albania ","3":"Algeria ","5..

我的问题是将此函数的输出（最终在ajax成功回调中作为'data'）转换为正确的格式，以放入自动完成的options数组中。

我可以获得控制台记录每个值，但我很难过。基本上用正确的语法抓住吸管。

$.ajax({
    type: "GET",
    dataType: "json",
    url: "/source/",
    success: function(data){
        /*
        magic array string creation code would go here instead of my code below...
        */
        $.each(data, function(i, item) {
            console.log(item);
        });
        console.log('data',data);


    }
})

Answer 1

如果您以正确的格式提供内容，自动完成插件可以为您完成大量工作。

我首先将$countries变量重新编入索引，从0开始。您可以使用array_values()函数：

echo json_encode(array_values($countries));

这应该为您提供格式为：

的JSON

['Afghanistan','Albania','Algeria',...]

然后，您可以将自动填充代码中的source属性更改为源操作的URL。

$( "#autocomplete" ).autocomplete({
    autoFocus: true,
    source: "/your_controller/source"
});

自动完成插件不会为您过滤结果，而是将查询字符串添加到带有term字段的网址（例如/ your_controller / source？term = foo），因此您需要修改{ {1}}使用此方法。

find()

您可以在API Documentation的自动填充中详细了解$countries = $this->Country->find('list', array( 'fields' => 'Country.country', 'conditions' => array( 'Country.country LIKE' => $this->request->query['term'] . '%' ) ));选项可以接受的不同类型。

使用对cakephp的ajax调用的内容填充我的jquery自动完成

1 个答案: