Jquery and Autocomplete

[Rendi Artha]

Hi everyone,
basically I'm new in Jquery, so need advice from all expert here.
I just come to http://jqueryui.com/demos/autocomplete/#custom-data and try to change data.

<script> $(function() { var projects = [ { "accId": 109, "accName": "Maximillian", "amid": 2, "icon": "Toto" }, { "accId": 421, "accName": "Waterfront", "amid": 39, "icon": "TBI" }, { "accId": 123, "accName": "Sizzle JS", "amid": 33, "icon": "test" } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.accId ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.accName ); $( "#project-id" ).val( ui.item.accId ); $( "#project-description" ).html( ui.item.amid ); $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); return false; } }) .data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.accName + "<br>" + item.amid + "</a>" ) .appendTo( ul ); }; }); </script>

<div class="demo">
	<div id="project-label">Select a project (type "j" for a start):</div>
	<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/>
	<input id="project"/>
	<input type="hidden" id="project-id"/>
	<p id="project-description"></p>
</div><!-- End demo -->

I realize that label and description is mandatory so that i cant change with my own schema data.
Any tips or suggestion to make it working?

Thanks in advance

[Bear Bibeault]

satriana visi wrote:I realize that label and description is mandatory so that i cant change with my own schema data.

Why not?

[Rendi Artha]

Bear Bibeault wrote:

satriana visi wrote:I realize that label and description is mandatory so that i cant change with my own schema data.

Why not?

Previously in demo :

var projects = [
			{
				value: "jquery",
				label: "jQuery",
				desc: "the write less, do more, JavaScript library",
				icon: "jquery_32x32.png"
			},
			{
				value: "jquery-ui",
				label: "jQuery UI",
				desc: "the official user interface library for jQuery",
				icon: "jqueryui_32x32.png"
			},
			{
				value: "sizzlejs",
				label: "Sizzle JS",
				desc: "a pure-JavaScript CSS selector engine",
				icon: "sizzlejs_32x32.png"
			}
		];

and I change to

var projects = [
			{
				"accId": 109,
				"accName": "Maximillian",
				"amid": 2,
				"icon": "Toto"
			},
			{
				"accId": 421,
				"accName": "Waterfront",
				"amid": 39,
				"icon": "TBI"
			},
			{
				"accId": 123,
				"accName": "Sizzle JS",
				"amid": 33,
				"icon": "test"
			}
		];

of course i also make arrangement such this

    $( "#project" ).autocomplete({
			minLength: 0,
			source: projects,
			focus: function( event, ui ) {
				$( "#project" ).val( ui.item.accId );
				return false;
			},
			select: function( event, ui ) {
				$( "#project" ).val( ui.item.accName );
				$( "#project-id" ).val( ui.item.accId );
				$( "#project-description" ).html( ui.item.amid );
				$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

				return false;
			}
		})
		.data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a>" + item.accName + "<br>" + item.amid + "</a>" )
				.appendTo( ul );
		};
	});

fortunately if won't work as demo. Any missing Bear?

PS : somehow i make double post.please for delete new post.thanks

[Bear Bibeault]

The widget expects a certain construct. You cant just go changing that structure. Why do you feel a need to change the property names? Youcan set the data to whatever you want.

[Rendi Artha]

Bear Bibeault wrote:The widget expects a certain construct. You cant just go changing that structure. Why do you feel a need to change the property names? Youcan set the data to whatever you want.

on purpose flexible handling JSON data from server. Every response from server is different format, thats way as starter I try change property names.o
I dont know about widget,if you mean the widget is

  .data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a>" + item.accName + "<br>" + item.amid + "</a>" )
				.appendTo( ul );
		};

as stated in .data() , .append() I already make arrangement. Is it correct way Bear?