jQuery自动完成不显示值

Question

我似乎不能让这个自动补全功能工作。我在我的搜索字段中使用这个：

<input type="text" data-cat="1" class="form-control interest-search" placeholder="Find some interests">

然后，我向服务器发出一个ajax请求，以便在数据库中搜索类似的项目，如下所示：

var search = null;
$(document).on('keyup', '.interest-search', function(){
    clearTimeout(search);
    var $this = $(this);
    search = setTimeout(function(){
        var search = $this.val();
        var category = $this.attr('data-cat');
        $.post('/suggest/interest', JSON.stringify({interest: search, category: category}), function(data){
            $('input[data-cat=' + category + ']').autocomplete({
                source: data
            });
        }, 'json');
    }, 200);
});

然后，我得到一个json结果数组，如下所示：

[
    {"label":"biking","value":"2","total":"1"},
    {"label":"billiards","value":"3","total":"3"}
]

但发生的情况是，没有显示任何内容。我也没有错误。

这里有一个小提琴：http://jsfiddle.net/s7zakqzo/

Answer 1

var search = null;

var data = [
    {label:"biking",value:"2",total:"1"},
    {label:"billiards",value:"3",total:"3"}
];

$(document).on('keyup', '.interest-search', function(){
    clearTimeout(search);
    var $this = $(this);
    search = setTimeout(function(){
        var search = $this.val();
        $this.autocomplete({
            source: data
        });
    }, 200);
});

将$('input[data-cat=' + category + ']')更改为$this。它解决了这个问题。