Solved

How to use jquery to autocomplete a text box with a value other than that which appears in the drop down box?

Posted on 2013-06-13
2
764 Views
Last Modified: 2013-06-13
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
<?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
?>

Open in new window


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>

Open in new window

0
Comment
Question by:evibesmusic
  • 2
2 Comments
 

Accepted Solution

by:
evibesmusic earned 0 total points
ID: 39246762
@All

Found my own solution. Pass the full string of by submitting the form. Then use PHP to quickly and cleanly extract the part of the string that I need.

Form passes value:

"FirstName LastName - UniqueID"

Then clean it up with a little PHP.

<?php
//POST DATA FROM FORM IN CODE ABOVE
$dirty_birds = $_POST['birds'];
$clean_birds = substr($dirty_birds, -7);
?>

Note: This only works in my case because I know that all UniqueID values are only and always 7 characters long.

Cheers! Hooray Me!
0
 

Author Closing Comment

by:evibesmusic
ID: 39246764
Found my own solution. Please see accepted solution.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now