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!
