自动完成建议不适合于Ajax

工作，我已经使用引导预输入的自动完成功能。自动完成建议不适合于Ajax

下面的代码是工作完美：

$(function() { 
var $input = $(".typeahead"); 
$input.typeahead({ 
    source: [ 
     {id: "someId1", name: "Display name 1"}, 
     {id: "someId2", name: "Display name 2"} 
    ], 
    minLength: 2 
}); 
});

但我想使用AJAX搜索。所以我做了如下更改：

$(function() { 
var $input = $(".typeahead"); 
$input.typeahead({ 
    source: function(query, process) { 
     return $.get('/search/good/auto-complete?term='+$('#search_searchtext').val()); 
    }, 
    minLength: 2 
}); 
});

上面的代码执行ajax请求，但它不显示来自ajax响应的建议。

所以，请建议我怎么能做到这一点。

来源

2017-03-07 Jigar Pancholi

你可以检查浏览器开发工具的NET选项卡，看看响应是什么样子。也许这不是JSON。 –

是它的JSON格式。 –

什么是你正在回来的响应内容类型？ –

尝试

$(function() { 
    var $input = $(".typeahead"); 
    $input.typeahead({ 
     source: function(query, process) { 
      return $.getJSON(
       '/search/good/auto-complete?term='+$('#search_searchtext').val(), 
       //{ query: query }, // <- Maybe you can use it instead of ?term='+$('#search_searchtext').val() 
       function (data) { 
        var newData = []; 

        $.each(data, function(){ 
         newData.push(this.name); 
        }); 

        process(newData); 

        return; 
       }); 
     }, 
     minLength: 2 
    }); 
});

来源

2017-03-07 10:00:01

谢谢，它的工作原理。 –

的预输入插件，我想你会需要配置猎犬引擎。请参阅文件 -

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

它应该是这样的 -

var data= new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: '/api/data?query=%QUERY', 
     wildcard: '%QUERY' 
    } 
});

，然后根据上面的数据对象下面你可以给源 -

$('#input').typeahead({ 
    hint: true, 
    highlight: true, 
    valueKey: 'name', 
    minLength: 1 
}, { 
    name: 'title', 
    display: 'name', 

    source: data 
});

你可以试试看。

来源

2017-03-07 10:38:53

自动完成建议不适合于Ajax

回答

相关问题