Question

我想从服务器获取数据并使用typeahead建议。我将列表中的数据发送到类似/foo/q=QUERY的usl，此查询返回json，如["salam","bye", "khodafez,]。我如何使用bootstrap typeahead建议。我试试这段代码：

 <script type="text/javascript">
            $(document).ready(function() {
                $("#vahid").typeahead({
                     // ???    
                });
            });
          </script>

Answer 1

根据the documentation，您只需在选项中为source提供功能：

$("#vahid").typeahead({
    source: function(query, process) {
        // `query` is the text in the field
        // `process` is a function to call back with the array
        $.ajax({
            // Your URL
            url: "/foo",

            // Your argument with the query as its value
            data: {q: query},

            // Success callback -- since it expects the first
            // parameter to be the data, and that's what the
            // success callback is called with, you can just
            // use `process` directly
            success: process
        });
    }
});

以上假设响应正确地将响应标识为Content-Type: application/json。如果没有，请添加

dataType: "json"

...到您的ajax选项。

我正在使用异步机制，因为您正在查询服务器。如果您已经拥有数据客户端，则可以直接从source函数返回它。但是他们（聪明地）不要求你从服务器同步检索它，因为这会导致错误的XU。

Answer 2

根据文档https://github.com/tcrosen/twitter-bootstrap-typeahead 你可以添加ajax attr，如：

$('#myElement').typeahead({
    ajax: '/path/to/mySource'
});

或

var mySource = [
    { id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}
];

$('#myElement').typeahead({
    source: mySource
});

用于本地数据

更新函数为typeahead

2 个答案: