Question

此代码在没有远程查询的情况下工作得很好，我放入远程查询的那一刻它不起作用

以下是代码人员，我可能会出错，理想情况下我要实现的是一个bootstrap typeahead，它在keyup上查询数据库：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Tokenfield for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery UI CSS -->
    <link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
    <!-- Bootstrap styling for Typeahead -->
    <link href="dist/css/tokenfield-typeahead.css" type="text/css" rel="stylesheet">
    <!-- Tokenfield CSS -->
    <link href="dist/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
    <!-- Docs CSS -->


  </head>
  <body>

    <input type="text" class="form-control" id="tokenfield-typeahead" value="andani" />


    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="dist/bootstrap-tokenfield.js" charset="UTF-8"></script>
    <script type="text/javascript" src="docs-assets/js/scrollspy.js" charset="UTF-8"></script>
    <script type="text/javascript" src="docs-assets/js/affix.js" charset="UTF-8"></script>
    <script type="text/javascript" src="docs-assets/js/typeahead.bundle.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="docs-assets/js/docs.min.js" charset="UTF-8"></script>
</body>
<?php

    try
    {
        $Conn=mysqli_connect("localhost","root","","andani_play");
        $Query="SELECT `GroupName` FROM `group`";

        $Result=mysqli_query($Conn,$Query);
        $Array=array();
        if($Result)
        {

            while($Data=mysqli_fetch_array($Result))
            {
            array_push($Array,$Data[0]);


            }
        echo json_encode($Array);
        }
        else
        {
        echo mysqli_error($Conn);
        }

    }
    catch (mysqli_error $e)
    {
    echo "error connecting to the database/host";
    exit();
    }


?>
<script>
$(document).ready(function(){
var engine = new Bloodhound({
  /*local: [{value: 'red'}, {value: 'blue'}, {value: 'green'} , {value: 'yellow'}, {value: 'violet'}, {value: 'brown'}, {value: 'purple'}, {value: 'black'}, {value: 'white'}],*/
  local: [<?php echo json_encode($Array); ?>],
  datumTokenizer: function(d) {
    return Bloodhound.tokenizers.whitespace(d.value);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace
});

engine.initialize();

$('#tokenfield-typeahead').tokenfield({
  typeahead: [null, { source: engine.ttAdapter() }]
});
});
</script>
  </body>
</html>

Answer 1

我明白了

<!DOCTYPE>
<html lang="en">

<head>
    <title>Andani Masikhwa</title>

    <link href="bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
    <!--<link href="tokenfield-typeahead.css" type="text/css" rel="stylesheet">-->

</head>
<style>
.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0097cf;

}
</style>


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="bootstrap-tokenfield.js" charset="UTF-8"></script>
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<script>
$(document).ready(function(){
    $('#search').tokenfield({
    typeahead:{
        name : 'sear',
        remote: {
            url : 'connection.php?query=%QUERY'
        },
        success:function(data){
            process(data);
        }

    }

    });
});
</script>
<body>
    <input type="text" class="form-control"  id="search" value="andani" />
</body>

</html>

Twitter Bootstrap Typeahead不使用远程源

1 个答案: