Typeahead Autocomplete AJAX

时间:2017-02-03 14:42:40

标签: jquery ajax twitter-bootstrap typeahead

我正在尝试使用外部Web服务提供的数据填充引导程序自动完成(Typeahead)列表,在本例中为“Wunderground Weather”,但它无效。

返回错误“hasOwnProperty”。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 <script src="bootstrap-typeahead.js"></script>

HTML

<div class="col-md-12">
    <h1>Search Dynamic Autocomplete using Bootstrap Typeahead JS</h1>   
    <input class="typeahead form-control"  type="text">
</div>

JQuery的

$(".typeahead").typeahead({
   source: function (query,process) {
                return process(autoCompleteWunderGround(query))
            }
});


function autoCompleteWunderGround(query){
    var results = []
    $.ajax({
        url : "http://autocomplete.wunderground.com/aq?query=query",
        dataType : "jsonp",
        jsonp : "cb",
        data : {
        "query" : query,
        "format" : "JSON",
        },
        success : function(data) {
            $.each( data.RESULTS, function( index, value ){
                results.push(value.name) 
            })
        }
    });

    return results;

}

由于

1 个答案:

答案 0 :(得分:0)

我认为问题在于返回函数autoCompleteWunderGround()。 Ajax是异步的,因此在成功之前函数的返回是executet。数组结果从未填充。 您可以尝试使用回调函数。