StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="https://i.stack.imgur.com/jSjkn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jSjkn.png" alt="Autocomplete with live suggestion"></a></p> <p>Yes, you can if you monkey-patch autocomplete.</p> <p>In the autocomplete widget included in v1.8rc3 of jQuery UI, the popup of suggestions is created in the _renderMenu function of the autocomplete widget. This function is defined like this: </p> <pre><code>_renderMenu: function( ul, items ) { var self = this; $.each( items, function( index, item ) { self._renderItem( ul, item ); }); }, </code></pre> <p>The _renderItem function is defined like this: </p> <pre><code>_renderItem: function( ul, item) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "</a>" ) .appendTo( ul ); }, </code></pre> <p>So what you need to do is replace that _renderItem fn with your own creation that produces the desired effect. This technique, redefining an internal function in a library, I have come to learn is called <a href="http://en.wikipedia.org/wiki/Monkey_patch" rel="noreferrer"><em>monkey-patching</em></a>. Here's how I did it: </p> <pre><code> function monkeyPatchAutocomplete() { // don't really need this, but in case I did, I could store it and chain var oldFn = $.ui.autocomplete.prototype._renderItem; $.ui.autocomplete.prototype._renderItem = function( ul, item) { var re = new RegExp("^" + this.term) ; var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + this.term + "</span>"); return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + t + "</a>" ) .appendTo( ul ); }; } </code></pre> <p>Call that function once in <code>$(document).ready(...)</code> .</p> <p>Now, this is a hack, because: </p> <ul> <li><p>there's a regexp obj created for every item rendered in the list. That regexp obj ought to be re-used for all items. </p></li> <li><p>there's no css class used for the formatting of the completed part. It's an inline style.<br> This means if you had multiple autocompletes on the same page, they'd all get the same treatment. A css style would solve that.</p></li> </ul> <p>...but it illustrates the main technique, and it works for your basic requirements. </p> <p><img src="https://i.stack.imgur.com/LGkc8.png" alt="alt text"></p> <p>updated working example: <a href="http://output.jsbin.com/qixaxinuhe" rel="noreferrer">http://output.jsbin.com/qixaxinuhe</a></p> <hr> <p>To preserve the case of the match strings, as opposed to using the case of the typed characters, use this line: </p> <pre><code>var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + "$&" + "</span>"); </code></pre> <p>In other words, starting from the original code above, you just need to replace <code>this.term</code> with <code>"$&"</code>.</p> <hr> <p><strong>EDIT</strong><br> The above changes <em>every</em> autocomplete widget on the page. If you want to change only one, see this question:<br> <a href="https://stackoverflow.com/questions/6163152/how-to-patch-just-one-instance-of-autocomplete-on-a-page/6164621#6164621">How to patch *just one* instance of Autocomplete on a page?</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload