2

我是 bootstrap 的新手，我需要一些帮助，我想创建一个 typeahead 下拉菜单，当用户在“ContactName”TEXTBOX中搜索联系人姓名并填写 3 个编辑框时，它会从我的 mysql 数据库中返回 3 个值-联系人姓名-电话号码-电子邮件地址的信息非常感谢您的所有努力

这是我尝试返回一个值的代码，我需要修改它以返回所有这些树值现在，当我尝试搜索联系人姓名时，它将正确返回，没有问题要问，但我不知道如何修改像我上面提到的那样带来 3 个值的代码

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&nbsp;</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&nbsp;</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 &nbsp;</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);
?>
4

1 回答 1

2

如果我对您的理解正确，您将获得结果但无法填充输入字段。虽然我不使用 Twitter Bootstrap typeahead，但我使用 jQuery 的自动完成功能做了一些非常相似的事情。下面的代码未经测试，当然您需要自己修改它，但希望能有所帮助。

有关类似的内容，请参阅此工作 jsFiddle演示。

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);


您可以通过手动输入 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"}]


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>

以下是您可能想要查看的其他几篇文章如何从 AJAX 调用返回响应？和Bootstrap typeahead ajax 结果格式 - 示例

于 2013-08-29T18:41:51.800 回答