Twitter引导程序typeahead返回多个值并填充编辑框


Twitter bootstrap typeahead return multiple values and fillup the editbox

我是bootstrap的新手,我需要一些帮助,当用户在"ContactName"TEXTBOX中搜索联系人名称并用-联系人姓名-电话号码-电子邮件地址提前感谢

这是我尝试返回一个值的代码,我需要修改它来返回所有这些树值现在,当我尝试搜索联系人姓名时,它会正确返回,没有任何问题可问,但我不知道如何修改代码以带来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);
?>

如果我理解正确,您将返回结果,但无法填充输入字段。虽然我不使用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结果格式-示例