How to use jquery to autocomplete a text box with a value other than that which appears in the drop down box?
Experts,
I've successfully been able to create an autocomplete text box using jquery, php, and mysql.
Specifically, I am asking users to enter a few characters of the last name of an individual and then select the full name of the individual from the resulting dropdown box.
My PHP script connects to the database and pulls three pieces of information: FirstName, LastName, and UniqueID. The FirstName and LastName are shown to the user in the dropdown box.
My issue is this...
I'd like to insert the UniqueID into the text box when a name is selected rather than having it populate with the First and Last Name that was selected by the user.
Example:
1) User types in "Jo"
2) The dropdown menu reveals the first and last name "Bob Jones".
3) When the user selects the name "Bob Jones" from the drop down list, I'd like the form field to be filled with Bob Jones' UniqueID "xyz123" versus filling the field with the text "Bob Jones".
Can anyone help me figure out how to do this? My code is attached below.
PHP DB Connection and query
JQuery Code
I've successfully been able to create an autocomplete text box using jquery, php, and mysql.
Specifically, I am asking users to enter a few characters of the last name of an individual and then select the full name of the individual from the resulting dropdown box.
My PHP script connects to the database and pulls three pieces of information: FirstName, LastName, and UniqueID. The FirstName and LastName are shown to the user in the dropdown box.
My issue is this...
I'd like to insert the UniqueID into the text box when a name is selected rather than having it populate with the First and Last Name that was selected by the user.
Example:
1) User types in "Jo"
2) The dropdown menu reveals the first and last name "Bob Jones".
3) When the user selects the name "Bob Jones" from the drop down list, I'd like the form field to be filled with Bob Jones' UniqueID "xyz123" versus filling the field with the text "Bob Jones".
Can anyone help me figure out how to do this? My code is attached below.
PHP DB Connection and query
<?php
include('../scripts/db_connection.php');
//connect to your database
$term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends
$qstring = "SELECT FirstName, LastName, UniqueID FROM sandbox.members WHERE FirstName LIKE '%".$term."%'";
$result = mysql_query($qstring);//query the database for entries containing the term
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//loop through the retrieved values
{
$row_set[] = $row['FirstName'].' '.$row['LastName'];//build an array
}
echo json_encode($row_set);//format the array into json data
?>JQuery Code
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Remote with caching</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
var cache = {};
$( "#birds" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
$.getJSON( "search.php", request, function( data, status, xhr ) {
cache[ term ] = data;
response( data );
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" />
</div>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER