Typeahead with JSON, php, sql - returning data to two fields from two arrays?
This is my first foray into JSON and I'm trying to develop an autocomplete field with JSON, php and sql. I've got it working on a single field (employee Name) but would like to add a second field that gets populated by the employee title when the employee name is selected.
So far, my test page looks like:
And the fetchEmpName.php file is like:
The code is working if I only use the $empName or $empTitle array and encode that ($data = $empTitle or $data=$empName.
However making an array of both arrays causes the empName box to return two blank lines instead of any names or titles when I type. I get that, but I don't know what to do about it to access the underlying data and have the names list in text box one and populate the employee title to text box two upon a selection.
As always, thanks in advance for any help offered.
So far, my test page looks like:
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Textbox Demo | PHP | jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var availableTags = <?php include('fetchEmpName.php'); ?>;
$("#empName").autocomplete({
source: availableTags,
autoFocus:true
});
});
</script>
</head>
<body>
<label>Department Name</label></br>
<input id="empName" type="text" size="50" />
<input id="empTitle" type="text" size="50" />
</body>
</html>And the fetchEmpName.php file is like:
<?php
require('i_PDOConnection.php');
$query = "SELECT empFName + ' ' + empLName as [empName], empTitle FROM tbl_CouncilStaff WHERE active = 1 AND display = 1 AND (empFName LIKE '%".$search."%' OR empLName LIKE '%".$search."%') ORDER BY empLName";
$stmt = $dbh->prepare($query);
$stmt->execute();
$data = $stmt->fetchAll();
foreach ($data as $row) {
$empName[] = $row['empName'];
$empTitle[] = $row['empTitle'];
}
$arrData = array($empName,$empTitle);
echo json_encode( $arrData );
?>The code is working if I only use the $empName or $empTitle array and encode that ($data = $empTitle or $data=$empName.
However making an array of both arrays causes the empName box to return two blank lines instead of any names or titles when I type. I get that, but I don't know what to do about it to access the underlying data and have the names list in text box one and populate the employee title to text box two upon a selection.
As always, thanks in advance for any help offered.
check this demo
is this what you want?
https://jsfiddle.net/0c12t9ts/
is this what you want?
https://jsfiddle.net/0c12t9ts/
var empNames = [];
var empTitles = [];
$(availableTags).each(function(ix, v) {
empNames.push(v.empName);
empTitles.push(v.empTitle);
});
$("#empName").autocomplete({
source: empNames,
autoFocus: true
});
$("#empTitle").autocomplete({
source: empTitles,
autoFocus: true
});ASKER
Almost - I was hoping to have the first box populate the rest. So in your fiddle, if you select A1 in the first box, AAA1 AAAAA would populate box #2, typing and selecting b in box 1 would display AAA AAAA in box 2 and so on.
Thanks...
Thanks...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sadly I can't embed a gif or emoticon of a person bowing towards another - so thank you so much! Now that I have a model for this, I can use this in a lot of projects that we have planned. Many, many thanks!
can you create a jsfiddle.net demo with the html from page source on browser