?
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
Medium Priority
?
775 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 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