...

View Full Version : Auto Complete Text Boxes Based On Value Entered



mustangkid
03-22-2012, 11:46 PM
Hello! I need some help here. I need to pre-populate a name and a phone number box based on what's entered in the employee id box.

By entering in the employee id -

EMPLOYEE ID: [JOHN R]

It automatically fills in -

Employee Name: [John Roberts]
Employee Phone: [1234567890]

Thanks. :thumbsup:

Old Pedant
03-23-2012, 12:18 AM
AJAX. Pure and simple. (Unless your company has, say, fewer than 500 employees? In which case you could do it all in the browser if you created the page with an array of all the employees. Dare we assume what your level of expertise is in server-side and database code?)

mustangkid
03-23-2012, 12:25 AM
AJAX. Pure and simple. (Unless your company has, say, fewer than 500 employees? In which case you could do it all in the browser if you created the page with an array of all the employees. Dare we assume what your level of expertise is in server-side and database code?)

The company in question has fewer than 500 employees and would like to develop in javascript. Thanks!

Old Pedant
03-23-2012, 12:28 AM
Okay, but where will you get the list of employees from? I would *assume* you would need to go to the company database to get it, no? So that means you have to write some server side code (PHP/ASP/JSP) to get the names and ids and phone numbers out of the database and send them to the HTML/JavaScript code.

You have to be able to do that before you can worry about the JavaScript code (which is dirt simple).

Old Pedant
03-23-2012, 12:29 AM
And what do you want to do if the searcher doesn't *know* the user id? But knows, say, just the first name? Or just the last name?

mustangkid
03-23-2012, 12:35 AM
And what do you want to do if the searcher doesn't *know* the user id? But knows, say, just the first name? Or just the last name?

I would like to have a solution that would simply allow two text boxes to be filled in based on what was entered in the first box. If you could provide an example with some example variables it would allow me to build off of it. Thank you very much for your help.

Old Pedant
03-23-2012, 12:53 AM
<html>
<head>
<script type="text/javascript">
function Person( nm, ph )
{
this.name = nm;
this.phone = ph;
}

// people should be here alphabetically, if possible
var people = [
new Person("Adam Sandler", "800-111-2222" ),
new Person("Artful Dodger", "866-666-6666" ),
new Person("George Washington", "111-111-1111" ),
new Person("Harry Truman", "333-555-1111" ),
new Person("John Richards", "888-999-0000" ),
new Person("John Robertson", "555-731-8811" )
];

function findName( inp )
{
var form = inp.form;
form.personName.value = "";
form.phoneNumber.value = "";
var sofar = inp.value.toLowerCase();
for ( var p = 0; p < people.length; ++p )
{
var person = people[p];
if ( person.name.toLowerCase().indexOf(sofar) == 0 )
{
form.personName.value = person.name;
form.phoneNumber.value = person.phone;
}
}
}
</script>
</head>
<body>
<form>
Search for: <input name="search" onkeyup="findName(this);" />
<hr/>
Name: <input name="personName" readonly />
<br/>
Phone: <input name="phoneNumber" readonly />
</form>
</body>
</html>

It doesn't work well to only use two text boxes.

Try this, you'll see why.

Type in "A" and you get "Adam Sandler".
But then type "r" and you get "Artful Dodger".
Or type "J" or "Jo" or "John" or "John R" and you get "John Richards".
When you finally type "John Ro" then you get "John Robertson".

In other words it finds first name that matches all letters typed so far. You couldn't do that with a single text box, as the answer (e.g., "Adam Sandler") would keep appearing as soon as you typed the "A", etc.

mustangkid
03-23-2012, 01:05 AM
<html>
<head>
<script type="text/javascript">
function Person( nm, ph )
{
this.name = nm;
this.phone = ph;
}

// people should be here alphabetically, if possible
var people = [
new Person("Adam Sandler", "800-111-2222" ),
new Person("Artful Dodger", "866-666-6666" ),
new Person("George Washington", "111-111-1111" ),
new Person("Harry Truman", "333-555-1111" ),
new Person("John Richards", "888-999-0000" ),
new Person("John Robertson", "555-731-8811" )
];

function findName( inp )
{
var form = inp.form;
form.personName.value = "";
form.phoneNumber.value = "";
var sofar = inp.value.toLowerCase();
for ( var p = 0; p < people.length; ++p )
{
var person = people[p];
if ( person.name.toLowerCase().indexOf(sofar) == 0 )
{
form.personName.value = person.name;
form.phoneNumber.value = person.phone;
}
}
}
</script>
</head>
<body>
<form>
Search for: <input name="search" onkeyup="findName(this);" />
<hr/>
Name: <input name="personName" readonly />
<br/>
Phone: <input name="phoneNumber" readonly />
</form>
</body>
</html>

It doesn't work well to only use two text boxes.

Try this, you'll see why.

Type in "A" and you get "Adam Sandler".
But then type "r" and you get "Artful Dodger".
Or type "J" or "Jo" or "John" or "John R" and you get "John Richards".
When you finally type "John Ro" then you get "John Robertson".

In other words it finds first name that matches all letters typed so far. You couldn't do that with a single text box, as the answer (e.g., "Adam Sandler") would keep appearing as soon as you typed the "A", etc.

This is close, but no cigar. First box should be employee id with the bottom two being name and phone so a total of three variables:


new Person("John Robertson", "555-731-8811" )

Should be? ..


new Person("Employee ID", "John Robertson", "555-731-8811" )

Therefore an employee id will populate the bottom two boxes. Thanks.

Old Pedant
03-23-2012, 03:40 AM
So couldn't you change the code yourself???

It's a trivial change:

I did fix a minor bug, too. If you backspaced to nothing, it was always picking the last person. It now picks no one.



<html>
<head>
<script type="text/javascript">
function Person( id, nm, ph )
{
this.empid = id;
this.name = nm;
this.phone = ph;
}

// people should be here alphabetically by ID, if possible
var people = [
new Person("ADAM S", "Adam Sandler", "800-111-2222" ),
new Person("ART D", "Artful Dodger", "866-666-6666" ),
new Person("GEO W", "George Washington", "111-111-1111" ),
new Person("BUCK S", "Harry Truman", "333-555-1111" ),
new Person("J RICH", "John Richards", "888-999-0000" ),
new Person("JOHN R", "John Robertson", "555-731-8811" )
];

function findName( inp )
{
var form = inp.form;
form.personName.value = "";
form.phoneNumber.value = "";
var sofar = inp.value.toLowerCase();
if ( sofar.length == 0 ) return; // do nothing if no input

for ( var p = 0; p < people.length; ++p )
{
var person = people[p];
if ( person.empid.toLowerCase().indexOf(sofar) == 0 )
{
form.personName.value = person.name;
form.phoneNumber.value = person.phone;
return;
}
}
}
</script>
</head>
<body>
<form>
Search for: <input name="search" onkeyup="findName(this);" />
<hr/>
Name: <input name="personName" readonly />
<br/>
Phone: <input name="phoneNumber" readonly />
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum