我已经学习了本教程http://blattchat.com/2013/06/04/twitter-bootstrap-typeahead-js-with-underscore-js-tutorial/它在我自己的项目中发挥作用。我设法用id设置了一个隐藏字段，并将表单提交到另一个页面。
如何替换"本地"数组，以便从mysql数据库中检索该数组。
我也试过http://www.codingforums.com/showthread.php?t=286412但我没有让它与设置隐藏字段一起工作。
=============================================
在尝试了一些额外的东西之后，我开始了以下的工作。
<div class="content">
<form method="post" name="quicksearchform" id="quicksearchform" action="">
<fieldset>
<input type="text" placeholder="Quick search" id="quicksearch" class="quicksearch">
<input type="hidden" id="quicksearchid" name="quicksearchid">
<input type="hidden" id="quicksearchtype" name="quicksearchtype">
</fieldset>
</form>
</div>
<script>
$(function($) {
$('.quicksearch').typeahead({
name: 'quicksearch',
valueKey: 'name',
local: [{"id":"1","name":"user1","type":"type1"},
{"id":"2","name":"user2","type":"type2"}
]
}).on('typeahead:selected', function(event, datum) {
$('#quicksearchid').val(datum.id);
$('#quicksearchtype').val(datum.type);
$('#quicksearchform').submit();
});
});
</script>
我有一个php文件，它生成的输出与我放在local:之后的输出相同。因此，唯一需要做的就是从php文件（json_encoded）加载数据。
您是否尝试在函数外定义用于本地选项的信息？我会开始这样处理。
所以。。。将这些东西定义为一个名为data的变量。
[
{
id: 0,
name: 'Deluxe Bicycle',
price: 499.98
},
{
id: 1,
name: 'Super Deluxe Trampoline',
price: 134.99
},
{
id: 2,
name: 'Super Duper Scooter',
price: 49.95
}
]
在预编选项中。。。
$('input.product-typeahead').typeahead({
name: 'products',
header: '<h3>Products</h3>',
local: data
});
如果你能做到这一点，那么你可以将数据定义为一个php变量，在页面的php部分匹配这种结构。从数据库中检索信息后，构造一个所需数据的数组。
$data = array(structure of data you need);
然后json_encode，使其成为一个JavaScript可以解释的漂亮字符串。
$data = json_encode($data);
然后在JavaScript中使用eval（）或使用jQuery将字符串转换为JavaScript
var data = jQuery.parseJSON(<?php echo $data; ?>);
您需要从JS学习Ajax请求的基本原理，JS向服务器上的PHP脚本提交POST或GET请求，然后PHP脚本使用用户输入查询MySQL，并通常以JSON或XML形式返回MySQL，但它甚至可能是文本。
我会从以下几点开始：http://jqueryui.com/autocomplete/因为这是与typeahead相同的功能。
JQueryUI自动完成非常容易使用，并且可能有更多用户友好的教程。学习这些方法和JQUI自动完成小部件将允许您使用Typeahead执行所需操作。
注意：了解如何正确地"清除"用户输入的输入非常重要，然后输入到数据库查询中。这样，恶意代码总是有被注入到您的系统中的风险，通常会造成损坏或以其他方式危害您的系统
请参阅：如何防止PHP中的SQL注入？
以下是我的做法。我还为此写了一篇博客文章。
index.php文件
<body>
<div class="container">
<input class="typeahead" type="text" data-provide="typeahead" autocomplete="off">
</div><!-- /.container -->
<!-- Le javascript -->
<script src="/assets/jquery/jquery-1.10.2.min.js"></script>
<script src="/assets/bootstrap/2.3.2/js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'data.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + query,
success: function(data) {
console.log(data);
process(data);
}
});
}
});
});
</script>
</body>
</html>
data.php文件
// check connection
if ($mysqli->connect_errno){
printf("Connect failed: %s'n", $mysqli->connect_error);
exit();
}
$query = 'SELECT title FROM typeahead_example';
if(isset($_POST['query'])){
// Add validation and sanitization on $_POST['query'] here
// Now set the WHERE clause with LIKE query
$query .= ' WHERE title LIKE "%'.$_POST['query'].'%"';
}
$return = array();
if($result = $mysqli->query($query)){
// fetch object array
while($obj = $result->fetch_object()) {
$return[] = $obj->title;
}
// free result set
$result->close();
}
// close connection
$mysqli->close();
$json = json_encode($return);
print_r($json);
希望这能对你有所帮助，确保你在data.php文件上没有其他的回声/打印，它会把json搞砸。如果您想测试data.php响应，请直接转到页面或使用浏览器上的控制台或网络响应。