[jQuery autocomplete] changing value of hidden input

JavaScript
1

I’m using Jörn’s autocomplete jQuery plugin and I’m having trouble changing the value of my hidden input.

The first part works fine - it searches the array and I can select any of the results. However, I’m trying to grab the “id” key value from the array and use it as the value of my hidden input.

Here’s my test page.
(I’m using a “GET” form, so submit the form and you’ll see that the “account” value submits as empty)

Here’s my array:


var accounts = [
        { name: "Account One", id: "0001" },
        { name: "Account Two", id: "0002" },
        (etc...)
];

…and the part that (I believe) should be putting the value of #account into my hidden input:


$("#account").result(function(event, data, formatted) {
        if (data)
                $(this).parent().next().find("input").val(data[1]);

});

Basically, select “Account Five” from the auto-complete, and it should change the value of my hidden input to “0005”.

Seems like it should be a relatively simple solution, but I’m still fairly new to JS and jQuery. Any help is appreciated. Thanks!

2

I finally figured it out. For the record…
JS Data:


var accounts = [
	{ name: "Account One", id: "0001" },
	{ name: "Account Two", id: "0002" },
	{ name: "Account Three", id: "0003" },
	{ name: "Account Four", id: "0004" },
	{ name: "Account Five", id: "0005"}
];

JS Functions:


$().ready(function() {
	$("#account").autocomplete(accounts, {
		minChars: 0,
		width: 500,
		matchContains: true,
		autoFill: false,
		scrollHeight: 300,
		scroll: true,
		max: 25,
		formatItem: function(row, i, max) {
			return row.name;
		},
		formatMatch: function(row, i, max) {
			return row.name;
		},
		formatResult: function(row) {
			return row.name;
		}
	});
	$("#account").result(function(event, data, formatted) {
		$("#account_value").val(data["id"]);
	});
});

XHTML:


<input type="text" id="account" size="50" />
<input type="hidden" id="account_value" name="account" value="" />
3

I used it with json_encode() php function
it almost work but when I select the suggestions whole JSON row fill the input field and my hidden field doesn’t have any value

can you explain whit is “row” in:
formatMatch: function(row, i, max) {
return row.name;
}
or in other functions?

thanks

4

I’m just a JS amateur that might get certain things to work if I play around with it long enough. Do you have a test page I can take a look at?

FYI, here’s the API: