CODEWITHSUNDEEP
phpmysqljsontwitter-bootstrapbootstrap-typeahead
elie jammal
elie jammal

Reputation: 23

Twitter bootstrap typeahead return multiple values and fillup the editbox

I'm new in bootstrap and i need some help please, i want to create a typeahead drop-down that return 3 values from my mysql database when the user search for a contact name in "ContactName" TEXTBOX and fill up 3 edit box with the information of -contact name -Telephone Number -email address thanks a lot on advance for all your effort

this is the code that i try it to return one value i need to modified to return all those tree value Now when i try to search the contact name it will return with correctly with no question to ask but i don't know how to modify the code to bring 3 value like i mention above

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

Upvotes: 2

Views: 4744

Answers (1)

Brian
Brian

Reputation: 1184

If I'm understanding you correctly, you are getting results back but unable to populate the input fields. Although I don't use Twitter Bootstrap typeahead I do something very similar with jQuery's autocomplete feature. The code below is untested and of course you'll need to modify it for yourself but hopefully will be of some help.

See this working jsFiddle demo for something similar.

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


You can check what gets returned by manually entering the URL (ex: yoursite/Customer.php?query=SomeContactName). You should see something similar to this:

[{"ContactName":"Some Contact","Telephone":"5555555555","Email":"[email protected]"},
 {"ContactName":"Some Other Contact","Telephone":"5555555555","Email":"[email protected]"}]


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>

Here are a couple other posts that you might want to take a look at How to return the response from an AJAX call? and Bootstrap typeahead ajax result format - Example

Upvotes: 2

Related Questions