Modifying jQuery UI Autocomplete Script

[msaz87]

I'm trying to modify an out-of-the-box jQuery UI autocomplete script, but I really don't know what I'm doing with javascript.

 

The script works great as far as displaying what I want in the input where the autocomplete comes into play, but I want it to also insert each tag's hidden value into a hidden field.

 

Here's the script (and link to UI page):

 

	<script>
$(function() {
	var availableTags = [
				{
					value: "1",
					label: "jQuery"
				},
				{
					value: "2",
					label: "jQuery UI"
				},
				{
					value: "3",
					label: "Sizzle JS"
				}
	];
	function split( val ) {
		return val.split( /,\s*/ );
	}
	function extractLast( term ) {
		return split( term ).pop();
	}

	$( "#tags" )
		// don't navigate away from the field on tab when selecting an item
		.bind( "keydown", function( event ) {
			if ( event.keyCode === $.ui.keyCode.TAB &&
					$( this ).data( "autocomplete" ).menu.active ) {
				event.preventDefault();
			}
		})
		.autocomplete({
			minLength: 0,
			source: function( request, response ) {
				// delegate back to autocomplete, but extract the last term
				response( $.ui.autocomplete.filter(
					availableTags, extractLast( request.term ) ) );
			},
			focus: function() {
				// prevent value inserted on focus
				return false;
			},
			select: function( event, ui ) {
				var terms = split( this.value );
				// remove the current input
				terms.pop();
				// add the selected item
				terms.push( ui.item.label );
				// add placeholder to get the comma-and-space at the end
				terms.push( "" );
				this.value = terms.join( ", " );

				return false;
			}			
		});
});
</script>	

 

The rest of the relevant code:

 

				<table class="formTable">
					<th>Page(s) to add to:</th><td><input id="tags" name="pages" size="60" /> <input type="submit" value="submit" class="button" /></td>
				</table>

				<input type="hidden" name="pageIds" id="pageIds" />

 

So all I'm looking for it to do is to also insert the selected tags into the "pageIds" input, but use the value and not label as it's doing with the "tags" field.

 

Any help is appreciated -- thanks!

[Who8MyFish]

So just to clear things up/ You want the hidden <input>'s value to reflect the value of your text <input> am I right?

If so check this out, its a simple jQuery that literally changes the html of your page when click the submit button.

http://jsfiddle.net/RqsjN/

[msaz87]

So just to clear things up/ You want the hidden <input>'s value to reflect the value of your text <input> am I right?

If so check this out, its a simple jQuery that literally changes the html of your page when click the submit button.

http://jsfiddle.net/RqsjN/

 

So in the jQuery there's actually two values, there's the "label" (jQuery, jQuery UI, Sizzle JS) and then the "value" (1, 2, 3). When the user selects what they want in the text <input> it displays the label, but I want the script to duplicate that entry in the hidden <input> but use the corresponding value. So if they chose "jQuery, Sizzle JS" in the text <input> then the hidden <input> would show "1, 3". Does that make sense?

 

There's another example on the UI site that can display the different content, but I can't figure out how to merge that example with the one I'm currently working with, which allows for multiple entries: http://jqueryui.com/demos/autocomplete/#custom-data (this example only lets you input one response at a time).

[msaz87]

So just to clear things up/ You want the hidden <input>'s value to reflect the value of your text <input> am I right?

If so check this out, its a simple jQuery that literally changes the html of your page when click the submit button.

http://jsfiddle.net/RqsjN/

 

Your example works great, but is there any way to transfer the value associated in the array and not the label? The label displays in the text <input> and I'd like the corresponding value to go in the hidden <input>.

 

Thanks for the help!

[Who8MyFish]

Been away for a sec, did you still need help with this?