未定义的预先搜索建议 - 远程Ajax

时间:2014-08-14 10:44:51

标签: javascript jquery typeahead.js twitter-typeahead bloodhound

我正在尝试将typeahead远程源设置为一个Web方法,该方法将以JSON格式重新生成结果。

Ajax正在取得成功,并且正确地回归结果。以下代码中的控制台将打印如下

  

[{ “ID”: “1”, “值”: “Midhun”},{ “ID”: “2”, “值”: “Midhun2”}]

但是预先提出的建议都是未定义的

  

var typeHeadEngine = new Bloodhound({           名称:'姓名',           remote:{url:'page.aspx / method',

        ajax: {
            type: "POST",
            data: JSON.stringify({ "query": '%QUERY' }),
            contentType: "application/json; charset=utf-8",
            dataType: "text",                
            success: function (data) {
                var obj = JSON.parse(data);
                console.log(obj.d);
                return obj.d;
            }

        }

    },
    datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.val);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

typeHeadEngine .initialize();

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
     
    minLength: 3
},   {
  name: 'Name',
  displayKey: 'Value',
  source: typeHeadEngine.ttAdapter()
         

});

  

Web方法正在撤销JSON字符串,该字符串在ajax成功函数中转换为数组。在谷歌搜索期间,我发现typeahead需要数组而不是JSON对象,所以我转换成数组。

我经历了类似的问题来解决这个问题。但我无法这样做,
谁能帮忙弄清楚我在这里做错了什么?

1 个答案:

答案 0 :(得分:1)

您不应该使用ajax选项的success字段来转换您的JSON, 相反,你必须使用Bloodhound提供的filter字段:

var typeHeadEngine = new Bloodhound({
name: 'Name',
remote: {
    url: 'page.aspx/method',
    ajax: {
        type: "POST",
        data: JSON.stringify({
            "query": '%QUERY'
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "text"
    },
    filter: function (data) {
        var obj = JSON.parse(data);
        console.log(obj.d);
        return obj.d;
    }
},
datumTokenizer: function (d) {
    return Bloodhound.tokenizers.whitespace(d.val);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});