个人中心
gpt4 book ai didi

php - Twitter bootstrap typeahead 返回多个值并填充编辑框

转载 作者：行者123 更新时间：2023-11-29 02:27:45 25 4
gpt4 key购买 nike

我是 bootstrap 的新手，我需要一些帮助，我想创建一个预输入下拉列表，当用户在 "ContactName"TEXTBOX< 中搜索联系人姓名时，它会从我的 mysql 数据库中返回 3 个值/strong> 并在 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);
?>

最佳答案

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

查看这个有效的 jsFiddle demo对于类似的东西。

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>

这里有一些您可能想看看的其他帖子 How to return the response from an AJAX call?和 Bootstrap typeahead ajax result format - Example

关于php - Twitter bootstrap typeahead 返回多个值并填充编辑框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18498384/

25 4 0
文章推荐： ios - 创建此自定义 UINavigationbar ios 的最佳方法
文章推荐： mysql - 编写 SQL 查询以查找接近 min() 值的行
文章推荐： mysql - 用 pl/sql 中的子查询替换不匹配的值
文章推荐： mysql - 这是一个使用 GROUP BY 和 ORDER BY 的 SQL 连接，它会生成一个包含 # 个订单的报告，但它不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com