asked on

How do I modify the "source" result using jQuery UI - Autocomplete plugin?

I have what I think is a simple problem, but can't figure out how to solve it. I have a JQuery Autompleter set up that works in my simple test (this is actually one of the jQuery demos). However, it is not working in my production environment becuase the json result is slightly different from what jQuery wants.

For example, for the source: field of the autocompleter...

JQuery wants this => ["a","b","c"]
The production environment gives this => {"categoryResults":["a","b","c"]}

I can change the parameter name "categoryResults" to anything I want, but I can't return just ["a","b","c"].

I need to figure out what I need to rename "categoryResults" to or how to surround the search.php json result to give jQuery what it wants for the source: field. Can anyone help?

See demo code below - I have marked the part that needs modification...

<html>
<head>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>

	<!-- Datasource Example -->
	<script>
		$(function() {
			function log( message ) {
				$( "<div/>" ).text( message ).prependTo( "#log" );
				$( "#log" ).attr( "scrollTop", 0 );
			}

			$( "#birds" ).autocomplete({
				// *** THIS IS WHERE I NEED TO FIX THE RESULTS ***
				source: "search.php",
				minLength: 2,
				select: function( event, ui ) {
					log( ui.item ?
					"Selected: " + ui.item.value + " aka " + ui.item.id :
					"Nothing selected, input was " + this.value );
				}
			});
		});
	</script>

	<div class="demo">
		<div class="ui-widget">
			<label for="birds">Birds: </label>
			<input id="birds" />
		</div>
		<div class="ui-widget" style="margin-top:2em; font-family:Arial">
			Result:
			<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
		</div>
	</div>
	<!-- End Datasource Example -->

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

burtonrhodes

ASKER

Brilliant. THanks!

leakim971

You're welcome! Thanks for the points!

How do I modify the &quot;source&quot; result using jQuery UI - Autocomplete plugin?

How do I modify the "source" result using jQuery UI - Autocomplete plugin?