Php Twitter引导程序typeahead返回多个值并填充editbox
我是bootstrap新手，我需要一些帮助。我想创建一个typeahead下拉列表，当用户在“ContactName”文本框中搜索联系人姓名时，从我的mysql数据库返回3个值，并在3个编辑框中填入联系人信息 -联系人姓名 -电话号码 -电子邮件地址 非常感谢advance为您所做的一切努力Php Twitter引导程序typeahead返回多个值并填充editbox,php,mysql,json,twitter-bootstrap,bootstrap-typeahead,Php,Mysql,Json,Twitter Bootstrap,Bootstrap Typeahead,我是bootstrap新手，我需要一些帮助。我想创建一个typeahead下拉列表，当用户在“ContactName”文本框中搜索联系人姓名时，从我的mysql数据库返回3个值，并在3个编辑框中填入联系人信息 -联系人姓名 -电话号码 -电子邮件地址 非常感谢advance为您所做的一切努力 <script> $('input.typeahead').typeahead({ source: function (query, process) {
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
// data: 'query=' + query,
data: 'query=' + $('#contactName').val(),
success: function(data)
{
var results = data.map(function(item) {
var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
return JSON.stringify(someItem.contactname);
});
return process(results);
}
});
},
minLength: 1,
updater: function(item) {
// This may need some tweaks as it has not been tested
var obj = JSON.parse(item);
return item;
}
});
</script>
enter code here
**php page: Customer.php**
-------------------------------------------
<?php
$host = "localhost";
$uname = "root";
$pass = "";
$database = "db34218";
$connection=mysql_connect($host,$uname,$pass) or die("connection in not ready <br>");
$result=mysql_select_db($database) or die("database cannot be selected <br>");
if (isset($_REQUEST['query'])) {
$query = $_REQUEST['query'];
$sql = mysql_query ("SELECT ContactName, Telephone, Email FROM customer WHERE ContactName LIKE '%{$query}%'");
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
$array[] = $row['ContactName'];
}
echo json_encode ($array); //Return the JSON Array
}
?>
**html and java page and some php: Customersearch.php**
------------------------------------------------
<body>
.
.
.
<div class="row-fluid">
<div class="span4">
<label>ContactName </label>
<input type="text" name="ContactName" value="<?php echo $row_Recordset_QuoteCustomer['ContactName']?>" data-provide="typeahead" class="typeahead input-xlarge" autocomplete="off">
</div>
<div class="span2">
<label>Telephone </label>
<input type="text" name="Telephone" value="<?php echo htmlentities($row_Recordset_QuoteCustomer['Telephone'], ENT_COMPAT, 'utf-8'); ?>" class="span12">
</div>
<div class="span2">
<label>Email </label>
<input type="text" name="Email " value="<?php echo htmlentities(row_Recordset_QuoteCustomer['Email '], ENT_COMPAT, 'utf-8'); ?>" class="span12">
</div>
.........
.
.
.
.
.
.
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap-transition.js"></script>
<script src="../js/bootstrap-alert.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="../js/bootstrap-tab.js"></script>
<script src="../js/bootstrap-tooltip.js"></script>
<script src="../js/bootstrap-popover.js"></script>
<script src="../js/bootstrap-button.js"></script>
<script src="../js/bootstrap-typeahead.js"></script>
<script src="../js/SpecWorkPages/getItemsList.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('input.typeahead').typeahead({
source: function (query, process)
{
$.ajax(
{
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + query,
success: function(data)
{
console.log(data);
process(data);
}
});
}
});
})
</script>
</body>
</html>
<?php
mysql_free_result($RecordsetQuote);
mysql_free_result($Recordset_QuoteStatus);
mysql_free_result($Recordset_QuoteCustomer);
?>
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
// data: 'query=' + query,
data: 'query=' + $('#contactName').val(),
success: function(data)
{
var results = data.map(function(item) {
var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
return JSON.stringify(someItem.contactname);
});
return process(results);
}
});
},
minLength: 1,
updater: function(item) {
// This may need some tweaks as it has not been tested
var obj = JSON.parse(item);
return item;
}
});
</script>
在此处输入代码
**php页面：Customer.php**
-------------------------------------------
如果我理解正确，您将返回结果，但无法填充输入字段。虽然我没有使用Twitter引导程序typeahead，但我使用jQuery的自动完成功能做了一些非常类似的事情。下面的代码未经测试，当然您需要自己修改，但希望能有所帮助
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
// data: 'query=' + query,
data: 'query=' + $('#contactName').val(),
success: function(data)
{
var results = data.map(function(item) {
var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
return JSON.stringify(someItem.contactname);
});
return process(results);
}
});
},
minLength: 1,
updater: function(item) {
// This may need some tweaks as it has not been tested
var obj = JSON.parse(item);
return item;
}
});
</script>
请参阅此工作JSFIDLE以了解类似内容
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
// data: 'query=' + query,
data: 'query=' + $('#contactName').val(),
success: function(data)
{
var results = data.map(function(item) {
var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
return JSON.stringify(someItem.contactname);
});
return process(results);
}
});
},
minLength: 1,
updater: function(item) {
// This may need some tweaks as it has not been tested
var obj = JSON.parse(item);
return item;
}
});
</script>
PHP
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
array_push($array,array('ContactName'=>$row['ContactName'],'Telephone'=>$row['Telephone'],'Email'=>$row['Email']));
}
echo json_encode($array);
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
// data: 'query=' + query,
data: 'query=' + $('#contactName').val(),
success: function(data)
{
var results = data.map(function(item) {
var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
return JSON.stringify(someItem.contactname);
});
return process(results);
}
});
},
minLength: 1,
updater: function(item) {
// This may need some tweaks as it has not been tested
var obj = JSON.parse(item);
return item;
}
});
</script>
您可以通过手动输入URL来检查返回的内容（例如：yoursite/Customer.php？query=SomeContactName）。您应该看到类似的内容：
[{"ContactName":"Some Contact","Telephone":"5555555555","Email":"email@whatever.com"},
{"ContactName":"Some Other Contact","Telephone":"5555555555","Email":"anotheremail@whatever.com"}]
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
// data: 'query=' + query,
data: 'query=' + $('#contactName').val(),
success: function(data)
{
var results = data.map(function(item) {
var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
return JSON.stringify(someItem.contactname);
});
return process(results);
}
});
},
minLength: 1,
updater: function(item) {
// This may need some tweaks as it has not been tested
var obj = JSON.parse(item);
return item;
}
});
</script>
HTML/Javascript
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
// data: 'query=' + query,
data: 'query=' + $('#contactName').val(),
success: function(data)
{
var results = data.map(function(item) {
var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
return JSON.stringify(someItem.contactname);
});
return process(results);
}
});
},
minLength: 1,
updater: function(item) {
// This may need some tweaks as it has not been tested
var obj = JSON.parse(item);
return item;
}
});
</script>
$（'input.typeahead'）。typeahead({
来源：功能（查询、流程）{
$.ajax({
url:'Customer.php'，
键入：“POST”，
数据类型：“JSON”，
//数据：“查询=”+query，
数据：'query='+$（'#contactName'）.val（），
成功：功能（数据）
{
var结果=data.map（函数（项）{
var someItem={contactname:item.contactname，电话：item.telephone，email:item.email}；
返回JSON.stringify（someItem.contactname）；
});
返回过程（结果）；
}
});
},
最小长度：1，
更新程序：函数（项）{
//这可能需要一些调整，因为它尚未经过测试
var obj=JSON.parse（item）；
退货项目；
}
});
这里还有一些其他的帖子，你可能想看看，如果没有任何代码，任何人都很难提供帮助。如果你还没有，我建议你看看这里，这样可以有个好的开始。你也可以通过快速搜索查看其他关于这个主题的SO帖子：好的，我添加了我的代码，有人能帮我修改我的代码吗谢谢你的帮助，我真的很感激我将尝试修改我的页面谢谢，很抱歉再次用我的代码打扰你的大脑，我试图将你的代码添加到我的页面，所以编辑框无法工作对于contactname当我输入姓名时，它停止搜索我不确定该怎么办我需要你的帮助，contactname框应该像jquery中的AutoComplete一样，当我开始键入联系人姓名时，它将返回mysql表中找到的所有姓名上面的代码非常适合这种情况，但我需要手机和电子邮件来填充其他2个编辑框。请帮助。查看我的更新。我将minLength设置为1，以便它在您开始键入时立即开始搜索，并在您键入时将contactName的值传递给您的PHP页面。我假设在选择联系人姓名时，您正在尝试填充电话和电子邮件字段（如您所见，这就是我在提供的JSFIDLE中所做的）。哦，最后a得到了一些东西，非常感谢，非常感谢，非常感谢，您太棒了。我仍然有一个问题，当我研究联系人姓名的下拉菜单时，它以这种格式显示[{“ContactName”：“某些联系人”，“电话”：“55555”，“电子邮件”：”email@whatever.com}，{“联系人姓名”：“其他联系人”，“电话”：“555555”，“电子邮件”：anotheremail@whatever.com"}]有没有办法只显示联系人姓名列表而不显示电话号码和电子邮件。因为电话号码和电子邮件将显示在电话号码和电子邮件编辑框Update answer中，后者只显示联系人姓名。更改就是返回JSON.stringify的地方。我不能为你写完整的代码，那样你学不到任何东西。不想表现得粗鲁，但你得自己去玩弄它，自己想办法解决一些问题。
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'Customer.php',
type: 'POST',
dataType: 'JSON',
// data: 'query=' + query,
data: 'query=' + $('#contactName').val(),
success: function(data)
{
var results = data.map(function(item) {
var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
return JSON.stringify(someItem.contactname);
});
return process(results);
}
});
},
minLength: 1,
updater: function(item) {
// This may need some tweaks as it has not been tested
var obj = JSON.parse(item);
return item;
}
});
</script>