jquery ajax调用不会在bootstrap typeahead中触发

时间:2013-01-11 23:21:19

标签: javascript jquery ajax bootstrap-typeahead

我尝试使用Ajax做一个twitter bootstrap typehead,但是没有发生。没有错误没有输出 这是我的jquery ajax代码

    function CallData() {

    $('input.typeahead.local.remote').typeahead({
        source: function (typeahead,query) {
            $.ajax({
                type: "GET",
                url: "http://cs-api-sandbox.herokuapp.com/v1/challenges/search?keyword=r&callback=my_callback",
                jsonpCallback: "my_callback",
                dataType: "jsonp",
                error: function (xhr, errorType, exception) {
                    var errorMessage = exception || xhr.statusText;
                    alert("Excep:: " + exception + "Status:: " + xhr.statusText);
                }
            });
        }
    });

}

function my_callback(data) {
    alert('hi');
}

这是我的HTML代码

<input type="text" id="txt" runat="server" class="span4 typeahead local remote" placeholder="Search..." />

我在每次按键时调用ajax函数CallData()但没有任何反应

2 个答案:

答案 0 :(得分:0)

您需要将结果从ajax请求传递给source的第二个参数(这是一个回调以填充前面的类型)。一个人为的例子:

$('#mytypeahead').typeahead({
    source: function(query, process){
        $.ajax({
            url: '/some/url?query='+query,
            success: function(response){
                process(response);
            }
        });
    }
});

答案 1 :(得分:0)

尝试将<!DOCTYPE html> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Demo project"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.css"> </head> <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "site_info"; $conn = mysql_connect($servername, $username, $password); mysql_select_db("site_info"); $siteid= $_GET['search1']; $sql = "SELECT * FROM total_database WHERE primary_key IN ('$siteid')"; $result = mysql_query($sql); if(!$result){die(mysql_error());} ?> <body> <div class="container"> <table class="table table-hover"> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> <th>column 4</th> <th>column 5</th> </tr> <?php if (mysql_num_rows($result) > 0) { while($row = mysql_fetch_array($result)) { echo "<form action=info.php method=GET>"; echo"<tr>"; echo "<td>" .$row["column1"]. "</td>"; echo "<td>" .$row["column2"]. "</td>"; echo "<td>" .$row["column3"]. "</td>"; echo "<td>" .$row["column4"]. "</td>"; echo "<td>" .$row["column5"]. "</td>"; echo "<input type=hidden name=site_id value=".$row["primary_key"]."></input>"; echo "<td>" ."<input class=btn type=submit value=select". "></td>"; echo"</tr>"; echo "</form>"; } } ?> </table> </div> </body> <script type="text/javascript"></script> 添加到$ .ajax中 - 因为javascript的机制是不同步的。 希望这个帮助