troubleshooting Question

How to get jQuery autocomplete results to populate input and append data to div upon select?

Avatar of evibesmusic
evibesmusicFlag for United States of America asked on
JavaScriptjQuery
16 Comments1 Solution2448 ViewsLast Modified:
Experts,

I need to update the following code to enable the following:

1) On select of an autocomplete option, fill the input with the selected "employee_name"
2) On select of an autocomplete option, append the "employee_name" to another div

The autocomplete function works properly in that it returns results made available via my external data source.

I am just unable to do steps 1 and 2 above.

Assistance would be appreciated.

Cheers!

$(function() {
	var projects = {};
	$( "#employee_name" ).autocomplete({
		minLength: 2,
		source: function( request, response ) {
			var term = request.term;
			if (term in projects) {
				response(projects[ term ] );
				return;
			}
			$.getJSON("./scripts/search.php?employee",request,function(data,status,xhr) {
				projects[term] = data;
				response(data);
			});
		},
		select: function(ui,item) {
			var employee_name = item.employee_name;
			$("#employee_results" ).empty();
			$("#employee_results").append("<b>Testing: </b>" + employee_name);
			return false;
		}
	})
	.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
		return $( "<li>" )
		.append( "<a>" + item.employee_name + "<br>" + item.manager + "</a>" )
		.appendTo( ul );
	};
});

<table cellpadding="2" cellspacing="2" border="0" width="100%">
    <tr>
    <td width="15%" valign="top">
    <h3><label for="employee_name">Employee Name: </label></h3>
    </td>
    <td align="left" width="35%" valign="top">
    <div class="ui-widget">
    <input style="width:90%; height:25px; padding:2px;" name="employee_name" id="employee_name" >
    </div>
    </td>
    <td width="50%" valign="top" align="left">
    <div class="ui-widget">
        <div id="employee_results" style="overflow: auto;" class="ui-widget-content">
            <!-- THIS IS WHERE THE EMPLOYEE INFORMATION WILL APPEAR AS A RESULT OF SEARCH -->
            
        </div>
    </div>
    </td>
    </tr>
</table>
ASKER CERTIFIED SOLUTION
leakim971
Multitechnician
Join our community to see this answer!
Unlock 1 Answer and 16 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 16 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros