var myDataArray = [
{label:'Stuff', value:'01'},
{label:'Things', value:'02'},
{label:'Whatevs', value:'03'},
{label:'Doodads', value:'04'},
{label:'Dinglehoppers', value:'05'},
{label:'Sassafras', value:'06'},
{label:'Bingo', value:'07'},
{label:'BlahBlah', value:'08'},
{label:'Moogie', value:'09'},
{label:'Whatchamacallit', value:'10'}
];
$.widget('ui.myCustomWidget', $.ui.autocomplete, {
renderItem: function( ul, item ) {
return $( '<li>' )
.append( $('<a>').html(decodeURI(item.label)) )
.appendTo(ul);
}
});
$('#myInput').myCustomWidget({
source: myDataArray,
minLength:1,
delay:0,
create: function() {
$(this).myCustomWidget('widget')
.addClass( 'myClass' )
.css({
'max-height': 500,
'overflow-y': 'scroll',
'overflow-x': 'hidden'
});
},
select: function( event, ui ) {
$('#myInput').val( ui.item.label );
$('#myHidden').val( ui.item.value );
return false;
}
});
/* === Old code below so you can see the difference. === */
/* ===================================================== */
/*
Creating a custom widget which inherits from the autocomplete widget. This allows us
to make changes without affecting any other autocomplete instances. It also allows us to make
a bunch of other widgets with the new rules if we want to, by using the new name "myCustomWidget".
*/
/*
$.widget( "ui.myCustomWidget", $.ui.autocomplete, {
options: {
renderItem: null,
renderMenu: null
},
_renderMenu: function( ul, items ) {
// This function has some internal stuff which needs to run before _renderItem
// is called, so it's important to call the "prototype" (super) function before
// overriding. If you prevent _renderItemData from running, then you'll end up on
// Stack Overflow searching for "_renderItemData" only to find out that you're not
// supposed to be overriding it. Worse, you end up writing code in to duplicate it
// when you could just let it do its thing.
this._super( ul, items );
// This is the custom bit. If there's a function provided for rendering menus, then run
// Otherwise, the regular version of _renderMenu has already run so we do nothing. Now
// you can use "myCustomWidget" with a top-level "renderItem" function if you want to.
if ( $.isFunction( this.options.renderMenu ) ) {
this.options.renderMenu( ul, items );
}
},
_renderItem: function( ul, item ) {
// No internal stuff, so just run the local function if there is one.
// Otherwise, run the internal jQuery UI default function.
if ( $.isFunction( this.options.renderItem ) ) {
return this.options.renderItem( ul, item );
} else {
return this._super( ul, item );
}
},
close: function( event, ui ) {
// First, run the regular closing function. We want this function to add to that
// rather than replace it.
this._super( event, ui );
// Now you can do whatever you want when you close.
}
});
// Creating our one-and-only myCustomWidget widget.
$('#myInput').myCustomWidget({
source: myDataArray,
minLength:1,
delay:0,
renderMenu: function( ul, items ) {
// Normally this wouldn't go here, but our custom widget checks
// to see if we defined our own renderMenu function.
$(ul)
.addClass( 'myClass' )
.css({
'max-height': 500,
'overflow-y': 'scroll',
'overflow-x': 'hidden'
});
},
renderItem: function( ul, item ) {
// Same deal as above. The _renderItem function checks for this
// one, but runs this INSTEAD of the default since there's no
// internal stuff to worry about.
return $( '<li>' )
.append( $('<a>').html(decodeURI(item.label)) )
.appendTo(ul);
},
select: function( event, ui ) {
$('#myInput').val( ui.item.label );
$('#myHidden').val( ui.item.value );
return false;
}
});
*/
<div class="container">
<form class="text-center">
<input type="hidden" name="myHidden" id="myHidden" value="Default">
<input type="text" name="myInput" id="myInput" placeholder="Default" value="">
</form>
<hr>
<p class="lead">Had an overengineered version of this, but then Scott Gonzalez gave me a trimmer option. I'm adjusting this to match that so I don't lead other people into doing the same work with more lines of code Turns out that it's all easier than I thought. I'm using the versions of jQuery and jQuery UI that my job uses, which are 1.9.1 and 1.11.4 respectively.</p>
<p>If you're looking on Stack Overflow for <strong>_renderItemData</strong>, then maybe this can help. That function is internal and shouldn't be messed with, but you can kill it if you override <strong>_renderMenu</strong> and get yourself into some trouble.</p>
<p>The code here sets up a custom widget that you can reuse, and it sets you up to use _renderMenu and _renderItem as regular options. The regular functions are run first, so these are extensions rather than overrides. The important one is _renderMenu, because it runs _renderItemData internally before passing the ball to _renderItem. You don't want to mess that up, or you end up on Stack Overflow.</p>
<p>Code is heavily commented, so that's where you'll find the details. I've also put this on <a href="" target="_blank">CodePen</a> so people can leave comments.</p>
<p><em>One last note:</em> at work we have a hidden field that we have to update with the value property in our data array, so I've included that so the folks at work can use this. You don't have to use a hidden field to have a custom autocomplete widget.</p>
</div>
body {
padding-top:20px;
}