Skip to main content

Monkeypatching jQuery UI Autocomplete

This blog post might be outdated!
This blog post was published more than one year ago and might be outdated!
· One min read
Stephan Hochdörfer
Stephan Hochdörfer
Head of IT Business Operations

Auch wenn jQuery und die jQuery UI Plugins einen flexiblen Einsatz in unseren Kundenprojekten gewährleisten stößt man manchmal an die Grenzen, dessen was die Autoren der einzelnen Plugins vorgesehen haben. So kommt man nicht umher mittels Monkeypatching den vorhandenen Quellcode dynamisch zur Laufzeit zu modifizieren. Im fogenden Fall war es bsp. vom Kunden gewünscht dass das eingegebene Suchwort in der Vorschlagsliste des Autocomplete Felds markiert werden soll. Da jQuery UI Autocomplete dies per se nicht vorsieht und es keine Möglichkeit gab sich "ordentlich" per Callback in die entsprechende Stelle einzuhängen musste wie folgt vorgegangen werden:

$.ui.autocomplete.prototype._renderItem = function (ul, item) { var term = $.ui.autocomplete.escapeRegex(this.term); item.label = item.label.replace( new RegExp(<span class="hl str">"(?![^&;]+;)(?!<[^<>]*)("</span> + term + <span class="hl str">")(?![^<>]*>)(?![^&;]+;)"</span>, <span class="hl str">"i"</span> ),<span class="hl str">"<strong>$1</strong>"</span> );<p>return $(<span class="hl str">"<li></li>"</span>) .data(<span class="hl str">"item.autocomplete"</span>, item) .append(<span class="hl str">"<a>"</span> + item.label + <span class="hl str">"</a>"</span>) .appendTo(ul);};</p>