<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Think In Geek &#187; jquery</title>
	<atom:link href="http://thinkingeek.com/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://thinkingeek.com</link>
	<description>In geek we trust</description>
	<lastBuildDate>Wed, 01 Feb 2012 14:45:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>Limiting the suggestions on jQueryUI Autocomplete widget</title>
		<link>http://thinkingeek.com/2011/03/29/limiting-the-suggestions-on-jqueryui-autocomplete-widget/</link>
		<comments>http://thinkingeek.com/2011/03/29/limiting-the-suggestions-on-jqueryui-autocomplete-widget/#comments</comments>
		<pubDate>Tue, 29 Mar 2011 08:08:00 +0000</pubDate>
		<dc:creator>brafales</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[autocomplete]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jqueryUI]]></category>

		<guid isPermaLink="false">http://thinkingeek.com/?p=163</guid>
		<description><![CDATA[If you ever used autocomplete.ui plugin from jQuery UI and have an array with lots of suggestions you&#8217;ll see that the solutions provided by the plugin are not always satisfactory. You can add a scrollbar to the suggestions box by using a CSS hack, but even with that, you&#8217;ll have to render a big HTML [...]]]></description>
			<content:encoded><![CDATA[<p>
If you ever used <a href="http://jqueryui.com/demos/autocomplete/" onclick="pageTracker._trackPageview('/outgoing/jqueryui.com/demos/autocomplete/?referer=');">autocomplete.ui</a> plugin from <a href="http://jqueryui.com/" onclick="pageTracker._trackPageview('/outgoing/jqueryui.com/?referer=');">jQuery UI</a> and have an array with lots of suggestions you&#8217;ll see that the solutions provided by the plugin are not always satisfactory. You can add a scrollbar to the suggestions box by using a CSS hack, but even with that, you&#8217;ll have to render a big HTML that can be annoying on slow machines (mobile devices, for example).
</p>
<p>
I was working on a web site recently that had to be displayed on mobile devices and needed an autocomplete. But the suggestions array was big. A lot. This caused some problems on the mobile devices as they were behaving very slow, and the default plugin configuration doesn&#8217;t allow you to specify a maximum number of items to show in the suggesstions box.
</p>
<p>
So I decided to do a dirty hack into the plugin code to add this behaviour, adding a <em>max</em> property to the options to be able to limit the number of suggestions to show.
</p>
<p>
It&#8217;s not a perfect solution, because it should be implemented as a subclass or something, but if you need a fast solution, this is the way to go. You can find the code in my <a href="https://github.com/brafales/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js" onclick="pageTracker._trackPageview('/outgoing/github.com/brafales/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js?referer=');">GitHub repository fork of jQueryUI</a>. You can check the <a href="https://github.com/brafales/jquery-ui/commit/aa07a7e7604394098bb65abcb1afacb74615e01e" onclick="pageTracker._trackPageview('/outgoing/github.com/brafales/jquery-ui/commit/aa07a7e7604394098bb65abcb1afacb74615e01e?referer=');">commit</a> to see the changes I made.
</p>
<p><span id="more-163"></span></p>
<p>
Here&#8217;s the resulting code file:
</p>
<p>
<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*
 * jQuery UI Autocomplete 1.8.10
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Autocomplete
 *
 * Depends:
 *	jquery.ui.core.js
 *	jquery.ui.widget.js
 *	jquery.ui.position.js
 */</span>
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> $<span style="color: #339933;">,</span> undefined <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// used to prevent race conditions with remote data sources</span>
<span style="color: #003366; font-weight: bold;">var</span> requestIndex <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
$.<span style="color: #660066;">widget</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;ui.autocomplete&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
	options<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
		appendTo<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;body&quot;</span><span style="color: #339933;">,</span>
		delay<span style="color: #339933;">:</span> <span style="color: #CC0000;">300</span><span style="color: #339933;">,</span>
		minLength<span style="color: #339933;">:</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
		position<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
			my<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;left top&quot;</span><span style="color: #339933;">,</span>
			at<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;left bottom&quot;</span><span style="color: #339933;">,</span>
			collision<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;none&quot;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		source<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
        max<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	pending<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
&nbsp;
	_create<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span>
			doc <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span><span style="color: #009900;">&#91;</span> <span style="color: #CC0000;">0</span> <span style="color: #009900;">&#93;</span>.<span style="color: #660066;">ownerDocument</span><span style="color: #339933;">,</span>
			suppressKeyPress<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>
			.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;ui-autocomplete-input&quot;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;autocomplete&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;off&quot;</span> <span style="color: #009900;">&#41;</span>
			<span style="color: #006600; font-style: italic;">// TODO verify these actually work as intended</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				role<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;textbox&quot;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">&quot;aria-autocomplete&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;list&quot;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">&quot;aria-haspopup&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;true&quot;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;keydown.autocomplete&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">options</span>.<span style="color: #660066;">disabled</span> <span style="color: #339933;">||</span> self.<span style="color: #660066;">element</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;readonly&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
&nbsp;
				suppressKeyPress <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
				<span style="color: #003366; font-weight: bold;">var</span> keyCode <span style="color: #339933;">=</span> $.<span style="color: #660066;">ui</span>.<span style="color: #660066;">keyCode</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">switch</span><span style="color: #009900;">&#40;</span> event.<span style="color: #660066;">keyCode</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">case</span> keyCode.<span style="color: #660066;">PAGE_UP</span><span style="color: #339933;">:</span>
					self._move<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;previousPage&quot;</span><span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">case</span> keyCode.<span style="color: #660066;">PAGE_DOWN</span><span style="color: #339933;">:</span>
					self._move<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;nextPage&quot;</span><span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">case</span> keyCode.<span style="color: #660066;">UP</span><span style="color: #339933;">:</span>
					self._move<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;previous&quot;</span><span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #006600; font-style: italic;">// prevent moving cursor to beginning of text field in some browsers</span>
					event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">case</span> keyCode.<span style="color: #660066;">DOWN</span><span style="color: #339933;">:</span>
					self._move<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;next&quot;</span><span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #006600; font-style: italic;">// prevent moving cursor to end of text field in some browsers</span>
					event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">case</span> keyCode.<span style="color: #660066;">ENTER</span><span style="color: #339933;">:</span>
				<span style="color: #000066; font-weight: bold;">case</span> keyCode.<span style="color: #660066;">NUMPAD_ENTER</span><span style="color: #339933;">:</span>
					<span style="color: #006600; font-style: italic;">// when menu is open and has focus</span>
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">menu</span>.<span style="color: #660066;">active</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						<span style="color: #006600; font-style: italic;">// #6055 - Opera still allows the keypress to occur</span>
						<span style="color: #006600; font-style: italic;">// which causes forms to submit</span>
						suppressKeyPress <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
						event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
					<span style="color: #006600; font-style: italic;">//passthrough - ENTER and TAB both select the current element</span>
				<span style="color: #000066; font-weight: bold;">case</span> keyCode.<span style="color: #660066;">TAB</span><span style="color: #339933;">:</span>
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>self.<span style="color: #660066;">menu</span>.<span style="color: #660066;">active</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
					self.<span style="color: #660066;">menu</span>.<span style="color: #660066;">select</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">case</span> keyCode.<span style="color: #660066;">ESCAPE</span><span style="color: #339933;">:</span>
					self.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">term</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					self.<span style="color: #000066;">close</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #003366; font-weight: bold;">default</span><span style="color: #339933;">:</span>
					<span style="color: #006600; font-style: italic;">// keypress is triggered before the input value is changed</span>
					clearTimeout<span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">searching</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					self.<span style="color: #660066;">searching</span> <span style="color: #339933;">=</span> setTimeout<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						<span style="color: #006600; font-style: italic;">// only search if the value has changed</span>
						<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">term</span> <span style="color: #339933;">!=</span> self.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
							self.<span style="color: #660066;">selectedItem</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
							self.<span style="color: #660066;">search</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #009900;">&#125;</span>
					<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> self.<span style="color: #660066;">options</span>.<span style="color: #660066;">delay</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;keypress.autocomplete&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> suppressKeyPress <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					suppressKeyPress <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
					event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;focus.autocomplete&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">options</span>.<span style="color: #660066;">disabled</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
&nbsp;
				self.<span style="color: #660066;">selectedItem</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
				self.<span style="color: #660066;">previous</span> <span style="color: #339933;">=</span> self.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">bind</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;blur.autocomplete&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">options</span>.<span style="color: #660066;">disabled</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
&nbsp;
				clearTimeout<span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">searching</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #006600; font-style: italic;">// clicks on the menu (or a button to trigger a search) will cause a blur event</span>
				self.<span style="color: #660066;">closing</span> <span style="color: #339933;">=</span> setTimeout<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					self.<span style="color: #000066;">close</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					self._change<span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">150</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._initSource<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">response</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> self._response.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span> self<span style="color: #339933;">,</span> arguments <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;&lt;ul&gt;&lt;/ul&gt;&quot;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;ui-autocomplete&quot;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">appendTo</span> <span style="color: #339933;">||</span> <span style="color: #3366CC;">&quot;body&quot;</span><span style="color: #339933;">,</span> doc <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span>
			<span style="color: #006600; font-style: italic;">// prevent the close-on-blur in case of a &quot;slow&quot; click on the menu (long mousedown)</span>
			.<span style="color: #660066;">mousedown</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">// clicking on the scrollbar causes focus to shift to the body</span>
				<span style="color: #006600; font-style: italic;">// but we can't detect a mouseup or a click immediately afterward</span>
				<span style="color: #006600; font-style: italic;">// so we have to track the next mousedown and close the menu if</span>
				<span style="color: #006600; font-style: italic;">// the user clicks somewhere outside of the autocomplete</span>
				<span style="color: #003366; font-weight: bold;">var</span> menuElement <span style="color: #339933;">=</span> self.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span><span style="color: #009900;">&#91;</span> <span style="color: #CC0000;">0</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>$<span style="color: #009900;">&#40;</span> event.<span style="color: #660066;">target</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">closest</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;.ui-menu-item&quot;</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					setTimeout<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						$<span style="color: #009900;">&#40;</span> document <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">one</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">'mousedown'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
							<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> event.<span style="color: #660066;">target</span> <span style="color: #339933;">!==</span> self.<span style="color: #660066;">element</span><span style="color: #009900;">&#91;</span> <span style="color: #CC0000;">0</span> <span style="color: #009900;">&#93;</span> <span style="color: #339933;">&amp;&amp;</span>
								event.<span style="color: #660066;">target</span> <span style="color: #339933;">!==</span> menuElement <span style="color: #339933;">&amp;&amp;</span>
								<span style="color: #339933;">!</span>$.<span style="color: #660066;">ui</span>.<span style="color: #660066;">contains</span><span style="color: #009900;">&#40;</span> menuElement<span style="color: #339933;">,</span> event.<span style="color: #660066;">target</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
								self.<span style="color: #000066;">close</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
							<span style="color: #009900;">&#125;</span>
						<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
&nbsp;
				<span style="color: #006600; font-style: italic;">// use another timeout to make sure the blur-event-handler on the input was already triggered</span>
				setTimeout<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					clearTimeout<span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">closing</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">13</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">menu</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066;">focus</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event<span style="color: #339933;">,</span> ui <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">=</span> ui.<span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;item.autocomplete&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #339933;">!==</span> self._trigger<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;focus&quot;</span><span style="color: #339933;">,</span> event<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						<span style="color: #006600; font-style: italic;">// use value to match what will end up in the input, if it was a key event</span>
						<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #009966; font-style: italic;">/^key/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">originalEvent</span>.<span style="color: #660066;">type</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
							self.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">value</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #009900;">&#125;</span>
					<span style="color: #009900;">&#125;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
				selected<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event<span style="color: #339933;">,</span> ui <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">=</span> ui.<span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;item.autocomplete&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
						previous <span style="color: #339933;">=</span> self.<span style="color: #660066;">previous</span><span style="color: #339933;">;</span>
&nbsp;
					<span style="color: #006600; font-style: italic;">// only trigger when focus was lost (click on menu)</span>
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">element</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">!==</span> doc.<span style="color: #660066;">activeElement</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						self.<span style="color: #660066;">element</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						self.<span style="color: #660066;">previous</span> <span style="color: #339933;">=</span> previous<span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// #6109 - IE triggers two focus events and the second</span>
						<span style="color: #006600; font-style: italic;">// is asynchronous, so we need to reset the previous</span>
						<span style="color: #006600; font-style: italic;">// term synchronously and asynchronously :-(</span>
						setTimeout<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
							self.<span style="color: #660066;">previous</span> <span style="color: #339933;">=</span> previous<span style="color: #339933;">;</span>
							self.<span style="color: #660066;">selectedItem</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">;</span>
						<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
&nbsp;
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #339933;">!==</span> self._trigger<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;select&quot;</span><span style="color: #339933;">,</span> event<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						self.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">value</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
					<span style="color: #006600; font-style: italic;">// reset the term after the select event</span>
					<span style="color: #006600; font-style: italic;">// this allows custom select handling to work properly</span>
					self.<span style="color: #660066;">term</span> <span style="color: #339933;">=</span> self.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
					self.<span style="color: #000066;">close</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					self.<span style="color: #660066;">selectedItem</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
				<span style="color: #000066;">blur</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event<span style="color: #339933;">,</span> ui <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #006600; font-style: italic;">// don't set the value of the text field if it's already correct</span>
					<span style="color: #006600; font-style: italic;">// this prevents moving the cursor unnecessarily</span>
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:visible&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span>
						<span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> self.<span style="color: #660066;">term</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						self.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">term</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">zIndex</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">zIndex</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span> <span style="color: #009900;">&#41;</span>
			<span style="color: #006600; font-style: italic;">// workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781</span>
			.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> top<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> left<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">data</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;menu&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> $.<span style="color: #660066;">fn</span>.<span style="color: #660066;">bgiframe</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			 <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">bgiframe</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	destroy<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>
			.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;ui-autocomplete-input&quot;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;autocomplete&quot;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;role&quot;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;aria-autocomplete&quot;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;aria-haspopup&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$.<span style="color: #660066;">Widget</span>.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">destroy</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_setOption<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> key<span style="color: #339933;">,</span> value <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$.<span style="color: #660066;">Widget</span>.<span style="color: #660066;">prototype</span>._setOption.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> arguments <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> key <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;source&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>._initSource<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> key <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;appendTo&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span> value <span style="color: #339933;">||</span> <span style="color: #3366CC;">&quot;body&quot;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">ownerDocument</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> key <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;disabled&quot;</span> <span style="color: #339933;">&amp;&amp;</span> value <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">xhr</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">xhr</span>.<span style="color: #660066;">abort</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_initSource<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span>
			array<span style="color: #339933;">,</span>
			url<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> $.<span style="color: #660066;">isArray</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">source</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			array <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">source</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">source</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> request<span style="color: #339933;">,</span> response <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				response<span style="color: #009900;">&#40;</span> $.<span style="color: #660066;">ui</span>.<span style="color: #660066;">autocomplete</span>.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span>array<span style="color: #339933;">,</span> request.<span style="color: #660066;">term</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">typeof</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">source</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;string&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			url <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">source</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">source</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> request<span style="color: #339933;">,</span> response <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> self.<span style="color: #660066;">xhr</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					self.<span style="color: #660066;">xhr</span>.<span style="color: #660066;">abort</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
				self.<span style="color: #660066;">xhr</span> <span style="color: #339933;">=</span> $.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
					url<span style="color: #339933;">:</span> url<span style="color: #339933;">,</span>
					data<span style="color: #339933;">:</span> request<span style="color: #339933;">,</span>
					dataType<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;json&quot;</span><span style="color: #339933;">,</span>
					autocompleteRequest<span style="color: #339933;">:</span> <span style="color: #339933;">++</span>requestIndex<span style="color: #339933;">,</span>
					success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> data<span style="color: #339933;">,</span> <span style="color: #000066;">status</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">autocompleteRequest</span> <span style="color: #339933;">===</span> requestIndex <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
							response<span style="color: #009900;">&#40;</span> data <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #009900;">&#125;</span>
					<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
					error<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">autocompleteRequest</span> <span style="color: #339933;">===</span> requestIndex <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
							response<span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #009900;">&#125;</span>
					<span style="color: #009900;">&#125;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			ehis.<span style="color: #660066;">source</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">source</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	search<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> value<span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		value <span style="color: #339933;">=</span> value <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">null</span> <span style="color: #339933;">?</span> value <span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// always save the actual value, not the one passed as an argument</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">term</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> value.<span style="color: #660066;">length</span> <span style="color: #339933;">&lt;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">minLength</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">close</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		clearTimeout<span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">closing</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>._trigger<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;search&quot;</span><span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>._search<span style="color: #009900;">&#40;</span> value <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_search<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> value <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">pending</span><span style="color: #339933;">++;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;ui-autocomplete-loading&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">source</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#123;</span> term<span style="color: #339933;">:</span> value <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">response</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_response<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> content <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">disabled</span> <span style="color: #339933;">&amp;&amp;</span> content <span style="color: #339933;">&amp;&amp;</span> content.<span style="color: #660066;">length</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			content <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._normalize<span style="color: #009900;">&#40;</span> content <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>._suggest<span style="color: #009900;">&#40;</span> content <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>._trigger<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;open&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">close</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">pending</span><span style="color: #339933;">--;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">pending</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;ui-autocomplete-loading&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #000066;">close</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		clearTimeout<span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">closing</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:visible&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">deactivate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>._trigger<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;close&quot;</span><span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_change<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">previous</span> <span style="color: #339933;">!==</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>._trigger<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;change&quot;</span><span style="color: #339933;">,</span> event<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">selectedItem</span> <span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_normalize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> items <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">// assume all items have the right format when the first item is complete</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> items.<span style="color: #660066;">length</span> <span style="color: #339933;">&amp;&amp;</span> items<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">label</span> <span style="color: #339933;">&amp;&amp;</span> items<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">value</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> items<span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">return</span> $.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span> items<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">typeof</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;string&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#123;</span>
					label<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span>
					value<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">return</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				label<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">label</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">value</span><span style="color: #339933;">,</span>
				value<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">value</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">label</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_suggest<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> items <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ul <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span>
			.<span style="color: #660066;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">zIndex</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">zIndex</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._renderMenu<span style="color: #009900;">&#40;</span> ul<span style="color: #339933;">,</span> items<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">max</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">// TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">deactivate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">refresh</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// size and position menu</span>
		ul.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._resizeMenu<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		ul.<span style="color: #660066;">position</span><span style="color: #009900;">&#40;</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
			of<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">position</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_resizeMenu<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ul <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span><span style="color: #339933;">;</span>
		ul.<span style="color: #660066;">outerWidth</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">max</span><span style="color: #009900;">&#40;</span>
			ul.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;&quot;</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">outerWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">outerWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_renderMenu<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> ul<span style="color: #339933;">,</span> items<span style="color: #339933;">,</span> max <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
		$.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> items<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> index<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> max <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> index <span style="color: #339933;">&lt;</span> max <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			    self._renderItem<span style="color: #009900;">&#40;</span> ul<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_renderItem<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> ul<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> $<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;&lt;li&gt;&lt;/li&gt;&quot;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">data</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;item.autocomplete&quot;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;&lt;a&gt;&lt;/a&gt;&quot;</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">label</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span> ul <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_move<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> direction<span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:visible&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">search</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">first</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009966; font-style: italic;">/^previous/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>direction<span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">last</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009966; font-style: italic;">/^next/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>direction<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">term</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">deactivate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span><span style="color: #009900;">&#91;</span> direction <span style="color: #009900;">&#93;</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	widget<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">menu</span>.<span style="color: #660066;">element</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
$.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span> $.<span style="color: #660066;">ui</span>.<span style="color: #660066;">autocomplete</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
	escapeRegex<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> value <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> value.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[-[\]{}()*+?.,\\^$|#\s]/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\\</span>$&amp;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	filter<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>array<span style="color: #339933;">,</span> term<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> matcher <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span> $.<span style="color: #660066;">ui</span>.<span style="color: #660066;">autocomplete</span>.<span style="color: #660066;">escapeRegex</span><span style="color: #009900;">&#40;</span>term<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;i&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> $.<span style="color: #660066;">grep</span><span style="color: #009900;">&#40;</span> array<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>value<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> matcher.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span> value.<span style="color: #660066;">label</span> <span style="color: #339933;">||</span> value.<span style="color: #660066;">value</span> <span style="color: #339933;">||</span> value <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#40;</span> jQuery <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">/*
 * jQuery UI Menu (not officially released)
 * 
 * This widget isn't yet finished and the API is subject to change. We plan to finish
 * it for the next release. You're welcome to give it a try anyway and give us feedback,
 * as long as you're okay with migrating your code later on. We can help with that, too.
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu
 *
 * Depends:
 *	jquery.ui.core.js
 *  jquery.ui.widget.js
 */</span>
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
$.<span style="color: #660066;">widget</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ui.menu&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
	_create<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>
			.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ui-menu ui-widget ui-widget-content ui-corner-all&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				role<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;listbox&quot;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">&quot;aria-activedescendant&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;ui-active-menuitem&quot;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>$<span style="color: #009900;">&#40;</span> event.<span style="color: #660066;">target</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">closest</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;.ui-menu-item a&quot;</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
				<span style="color: #006600; font-style: italic;">// temporary</span>
				event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				self.<span style="color: #660066;">select</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">refresh</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	refresh<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// don't refresh list items that are already adapted</span>
		<span style="color: #003366; font-weight: bold;">var</span> items <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;li:not(.ui-menu-item):has(a)&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ui-menu-item&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;role&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;menuitem&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		items.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ui-corner-all&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;tabindex&quot;</span><span style="color: #339933;">,</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>
			<span style="color: #006600; font-style: italic;">// mouseenter doesn't work with event delegation</span>
			.<span style="color: #660066;">mouseenter</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				self.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span> event<span style="color: #339933;">,</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">mouseleave</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				self.<span style="color: #660066;">deactivate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	activate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">deactivate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hasScroll</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> offset <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span> <span style="color: #339933;">-</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span><span style="color: #339933;">,</span>
				<span style="color: #000066;">scroll</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;scrollTop&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				elementHeight <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>offset <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;scrollTop&quot;</span><span style="color: #339933;">,</span> <span style="color: #000066;">scroll</span> <span style="color: #339933;">+</span> offset<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>offset <span style="color: #339933;">&gt;=</span> elementHeight<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;scrollTop&quot;</span><span style="color: #339933;">,</span> <span style="color: #000066;">scroll</span> <span style="color: #339933;">+</span> offset <span style="color: #339933;">-</span> elementHeight <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #009900;">&#41;</span>
				.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ui-state-hover&quot;</span><span style="color: #009900;">&#41;</span>
				.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;id&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;ui-active-menuitem&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._trigger<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;focus&quot;</span><span style="color: #339933;">,</span> event<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	deactivate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ui-state-hover&quot;</span><span style="color: #009900;">&#41;</span>
			.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;id&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._trigger<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;blur&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	next<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">move</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;next&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;.ui-menu-item:first&quot;</span><span style="color: #339933;">,</span> event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	previous<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">move</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;prev&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;.ui-menu-item:last&quot;</span><span style="color: #339933;">,</span> event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	first<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span>.<span style="color: #660066;">prevAll</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	last<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span>.<span style="color: #660066;">nextAll</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	move<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>direction<span style="color: #339933;">,</span> edge<span style="color: #339933;">,</span> event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span>edge<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #003366; font-weight: bold;">var</span> next <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span><span style="color: #009900;">&#91;</span>direction <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;All&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>next.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> next<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span>edge<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// TODO merge with previousPage</span>
	nextPage<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hasScroll</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">// TODO merge with no-scroll-else</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">last</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item:first&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #003366; font-weight: bold;">var</span> base <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span><span style="color: #339933;">,</span>
				height <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				result <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">close</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span> <span style="color: #339933;">-</span> base <span style="color: #339933;">-</span> height <span style="color: #339933;">+</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #006600; font-style: italic;">// TODO improve approximation</span>
					<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066;">close</span> <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">10</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000066;">close</span> <span style="color: #339933;">&gt;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">10</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">// TODO try to catch this earlier when scrollTop indicates the last page anyway</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>result.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				result <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item:last&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> result<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item&quot;</span><span style="color: #009900;">&#41;</span>
				.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">last</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;:first&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;:last&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// TODO merge with nextPage</span>
	previousPage<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hasScroll</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">// TODO merge with no-scroll-else</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">first</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item:last&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> base <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span><span style="color: #339933;">,</span>
				height <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				result <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">close</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span> <span style="color: #339933;">-</span> base <span style="color: #339933;">+</span> height <span style="color: #339933;">-</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #006600; font-style: italic;">// TODO improve approximation</span>
					<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066;">close</span> <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">10</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000066;">close</span> <span style="color: #339933;">&gt;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">10</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">// TODO try to catch this earlier when scrollTop indicates the last page anyway</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>result.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				result <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item:first&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> result<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">activate</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.ui-menu-item&quot;</span><span style="color: #009900;">&#41;</span>
				.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">first</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;:last&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;:first&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	hasScroll<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">element</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;scrollHeight&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	select<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> event <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>._trigger<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;selected&quot;</span><span style="color: #339933;">,</span> event<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">active</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>
</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fthinkingeek.com%2F2011%2F03%2F29%2Flimiting-the-suggestions-on-jqueryui-autocomplete-widget%2F&amp;title=Limiting%20the%20suggestions%20on%20jQueryUI%20Autocomplete%20widget" id="wpa2a_2" onclick="pageTracker._trackPageview('/outgoing/www.addtoany.com/share_save_url=http_3A_2F_2Fthinkingeek.com_2F2011_2F03_2F29_2Flimiting-the-suggestions-on-jqueryui-autocomplete-widget_2F_amp_title=Limiting_20the_20suggestions_20on_20jQueryUI_20Autocomplete_20widget?referer=');"><img src="http://thinkingeek.com/wp-content/plugins/add-to-any/share_save_120_16.gif" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://thinkingeek.com/2011/03/29/limiting-the-suggestions-on-jqueryui-autocomplete-widget/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>jQuery Bars plugin</title>
		<link>http://thinkingeek.com/2011/03/11/jquery-bars-plugin/</link>
		<comments>http://thinkingeek.com/2011/03/11/jquery-bars-plugin/#comments</comments>
		<pubDate>Fri, 11 Mar 2011 09:59:26 +0000</pubDate>
		<dc:creator>brafales</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[bars]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://thinkingeek.com/?p=160</guid>
		<description><![CDATA[I was developing an application recently that needed some king of horizontal bars to be drawn on a web page. I found the jQuery Progressbar plugin and found it it was something similar to what I wanted to achieve, so I took some spare time and modified it to convert it in a plugin I [...]]]></description>
			<content:encoded><![CDATA[<p>
I was developing an application recently that needed some king of horizontal bars to be drawn on a web page. I found the <a href="http://docs.jquery.com/UI/Progressbar" onclick="pageTracker._trackPageview('/outgoing/docs.jquery.com/UI/Progressbar?referer=');">jQuery Progressbar</a> plugin and found it it was something similar to what I wanted to achieve, so I took some spare time and modified it to convert it in a plugin I could use in my app. The result is the <a href="https://github.com/brafales/jQuery-bars" onclick="pageTracker._trackPageview('/outgoing/github.com/brafales/jQuery-bars?referer=');">jQuery Bars plugin</a>. It&#8217;s a pretty simple plugin that will take a div and convert it into a horizontal bar, in which you can change the background color, the actual bar color, the duration of the animation and the height and width of the bar.
</p>
<p>
You can check a how it works and looks in this simple <a href="http://thinkingeek.com/wp-content/uploads/jquery-bars/test.html">demo</a> I just uploaded. It can be useful if you ever have to shown some kind of a percentage bar in a chart and you need a bit more customization that jQuery UI Progressbar gives you.
</p>
<p>
The plugin is dual licensed in MIT and GPLv2, the same license as jQuery, so feel free to use it or modify it at your will.</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fthinkingeek.com%2F2011%2F03%2F11%2Fjquery-bars-plugin%2F&amp;title=jQuery%20Bars%20plugin" id="wpa2a_4" onclick="pageTracker._trackPageview('/outgoing/www.addtoany.com/share_save_url=http_3A_2F_2Fthinkingeek.com_2F2011_2F03_2F11_2Fjquery-bars-plugin_2F_amp_title=jQuery_20Bars_20plugin?referer=');"><img src="http://thinkingeek.com/wp-content/plugins/add-to-any/share_save_120_16.gif" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://thinkingeek.com/2011/03/11/jquery-bars-plugin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Execute javascript code every time a form is loaded via Ajax.BeginForm</title>
		<link>http://thinkingeek.com/2010/11/24/execute-javascript-code-every-time-a-form-is-loaded-via-ajax-beginform/</link>
		<comments>http://thinkingeek.com/2010/11/24/execute-javascript-code-every-time-a-form-is-loaded-via-ajax-beginform/#comments</comments>
		<pubDate>Wed, 24 Nov 2010 10:57:01 +0000</pubDate>
		<dc:creator>brafales</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[c#]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[MVC]]></category>

		<guid isPermaLink="false">http://thinkingeek.com/?p=140</guid>
		<description><![CDATA[If you&#8217;ve ever used the Ajax.BeginForm code to render a form in ASP MVC using Ajax (via jQuery, for example), you may have wondered there&#8217;s an object you can pass to the call called AjaxOptions. This object allows you to pass the BeginForm call some interesting options to further enhance the form when it&#8217;s rendered. [...]]]></description>
			<content:encoded><![CDATA[<p>
If you&#8217;ve ever used the <em>Ajax.BeginForm</em> code to render a form in ASP MVC using Ajax (via jQuery, for example), you may have wondered there&#8217;s an object you can pass to the call called <em>AjaxOptions</em>. This object allows you to pass the BeginForm call some interesting options to further enhance the form when it&#8217;s rendered. One of those options is specially useful if you want some javascript to be executed just after the form has been rendered. You can always use the <em>$(document).ready</em> in jQuery, but this code will not be called if, for example, the form is rendered after a postback and you have some validation errors (a missing required field, for example). Fortunately, you can use the <em>AjaxOptions</em> object to tell the form to execute a method right after the form has been loaded (for the first time or after a postback).
</p>
<p>
If you wonder how many parameters you can use in <em>AjaxOptions</em> you can visit the <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions_members(v=VS.90).aspx" onclick="pageTracker._trackPageview('/outgoing/msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions_members_v=VS.90_.aspx?referer=');">MSDN Help Page</a>. The option we&#8217;re interested in in this post is <em>OnSuccess</em>. Take a look at this code:
</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #008000;">&lt;%</span> <span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008000;">&#40;</span>Ajax<span style="color: #008000;">.</span><span style="color: #0000FF;">BeginForm</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;Action&quot;</span>, <span style="color: #666666;">&quot;Controller&quot;</span>, <span style="color: #008000;">new</span> AjaxOptions <span style="color: #008000;">&#123;</span> UpdateTargetId <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;someId&quot;</span>, InsertionMode <span style="color: #008000;">=</span> InsertionMode<span style="color: #008000;">.</span><span style="color: #0000FF;">Replace</span>, OnSuccess <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;someFunction&quot;</span> <span style="color: #008000;">&#125;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#123;</span><span style="color: #008000;">%&gt;</span>
        <span style="color: #008000;">&lt;%:</span> Html<span style="color: #008000;">.</span><span style="color: #0000FF;">TextBoxFor</span><span style="color: #008000;">&#40;</span>model <span style="color: #008000;">=&gt;</span> model<span style="color: #008000;">.</span><span style="color: #0000FF;">SomeProperty</span><span style="color: #008000;">&#41;</span> <span style="color: #008000;">%&gt;</span>
    <span style="color: #008000;">&lt;%</span><span style="color: #008000;">&#125;</span><span style="color: #008000;">%&gt;</span></pre></div></div>

<p>
This is a typical partial view that is intended to be used using an Ajax call. In it we simply display a TextBox to modify the property <em>SomeProperty</em> of our model. What we&#8217;re telling this form is that it should post to the <em>Action</em> action on the <em>Controller</em> controller. Everything is working as usual until here. However, we also pass the <em>BeginForm</em> an <em>AjaxOptions</em> object with some properties. The <em>UpdateTargetId</em> tells the form which DOM element on the page the form should be placed. The <em>InserionMode</em> tells the form what policy should follow when placing the form on the DOM, in this case we tell it that it should replace the contents of the element. And finally, <em>OnSuccess</em> tells the form what javascript code should execute once the form has been placed on the element, in this case we call a method called <em>someFunction</em>.
</p>
<p>
Imagine this is the HTML page in which we want to place this partial view:
</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;%@ Page Title=&quot;&quot; Language=&quot;C#&quot; Inherits=&quot;System.Web.Mvc.ViewPage&lt;dynamic&gt;&quot; %&gt;
&lt;html&gt;
&lt;body&gt;
    &lt;div id=&quot;someId&quot;&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div></div>

<p>
We can then add this javascript script in the page:
</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#123;</span>
    $.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        url<span style="color: #339933;">:</span> <span style="color: #339933;">&lt;%:</span> Url.<span style="color: #660066;">Action</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Edit&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Controller&quot;</span> <span style="color: #339933;">%&gt;,</span>
        success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#someId'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
        error<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>XMLHttpRequest<span style="color: #339933;">,</span> textStatus<span style="color: #339933;">,</span> errorThrown<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            jAlert<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Some error message'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Error'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>
What we&#8217;re doing here is loading via Ajax the <em>Edit</em> view using jQuery when the page loads. After the page has been loaded, then the <em>Ajax.BeginForm</em> call will look for a javascript method called <em>someFunction</em> and execute it. In there you can put whatever logic you need to be executed right after the form has been placed (for example, binding some elements to events or whatever). In this case, we can write a simple sample function like this one and add it on the partial view:
</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> someFunction<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Form loaded'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>
Now each time the form is loaded via Ajax, or in a post, the alert will popup.</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fthinkingeek.com%2F2010%2F11%2F24%2Fexecute-javascript-code-every-time-a-form-is-loaded-via-ajax-beginform%2F&amp;title=Execute%20javascript%20code%20every%20time%20a%20form%20is%20loaded%20via%20Ajax.BeginForm" id="wpa2a_6" onclick="pageTracker._trackPageview('/outgoing/www.addtoany.com/share_save_url=http_3A_2F_2Fthinkingeek.com_2F2010_2F11_2F24_2Fexecute-javascript-code-every-time-a-form-is-loaded-via-ajax-beginform_2F_amp_title=Execute_20javascript_20code_20every_20time_20a_20form_20is_20loaded_20via_20Ajax.BeginForm?referer=');"><img src="http://thinkingeek.com/wp-content/plugins/add-to-any/share_save_120_16.gif" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://thinkingeek.com/2010/11/24/execute-javascript-code-every-time-a-form-is-loaded-via-ajax-beginform/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating and consuming JSON data in MVC 2</title>
		<link>http://thinkingeek.com/2010/11/16/creating-and-consuming-json-data-in-mvc-2/</link>
		<comments>http://thinkingeek.com/2010/11/16/creating-and-consuming-json-data-in-mvc-2/#comments</comments>
		<pubDate>Tue, 16 Nov 2010 15:27:47 +0000</pubDate>
		<dc:creator>brafales</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[c#]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[MVC]]></category>

		<guid isPermaLink="false">http://thinkingeek.com/?p=135</guid>
		<description><![CDATA[Recently I started working in a project using MVC 2. I found out a very useful feature to retrieve JSON data from the server using an Action in a Controller. This feature is in the base Controller class, which we inherit when we create a new controller. If you take a look into the different [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I started working in a project using MVC 2. I found out a very useful feature to retrieve JSON data from the server using an Action in a Controller.</p>
<p>This feature is in the base <b>Controller</b> class, which we inherit when we create a new controller. If you take a look into the different methods this class has you&#8217;ll find those ones:</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #008080; font-style: italic;">//</span>
<span style="color: #008080; font-style: italic;">// Summary:</span>
<span style="color: #008080; font-style: italic;">//     Creates a System.Web.Mvc.JsonResult object that serializes the specified</span>
<span style="color: #008080; font-style: italic;">//     object to JavaScript Object Notation (JSON).</span>
<span style="color: #008080; font-style: italic;">//</span>
<span style="color: #008080; font-style: italic;">// Parameters:</span>
<span style="color: #008080; font-style: italic;">//   data:</span>
<span style="color: #008080; font-style: italic;">//     The JavaScript object graph to serialize.</span>
<span style="color: #008080; font-style: italic;">//</span>
<span style="color: #008080; font-style: italic;">// Returns:</span>
<span style="color: #008080; font-style: italic;">//     The JSON result object that serializes the specified object to JSON format.</span>
<span style="color: #008080; font-style: italic;">//     The result object that is prepared by this method is written to the response</span>
<span style="color: #008080; font-style: italic;">//     by the MVC framework when the object is executed.</span>
<span style="color: #0600FF; font-weight: bold;">protected</span> <span style="color: #0600FF; font-weight: bold;">internal</span> JsonResult Json<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> data<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></div></div>

<p>Along with this method, there are some overloads that allow more parameters, you can see them all in here: <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.controller.json.aspx" onclick="pageTracker._trackPageview('/outgoing/msdn.microsoft.com/en-us/library/system.web.mvc.controller.json.aspx?referer=');">Controller.Json Method</a>. In this example I&#8217;ll use the first one, which is the simplest.</p>
<p><span id="more-135"></span></p>
<p>This method returns a <b>JsonResult</b>, which inherits from <b>ActionResult</b>. This means that the result from a <b>Json</b> call can be returned in any controller action, as you would normally return a <b>View</b>. To use this method, you simply have to call it and pass it an object. The controller will be smart enough to inspect the object and create a valid <b>JSON</b> string containing all the info from the original object. Here&#8217;s a little example:</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> ActionResult GetPersonInfo<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">int</span> id<span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
	<span style="color: #008080; font-style: italic;">//For this example we don't get the person info from any data layer</span>
    var jsonData <span style="color: #008000;">=</span> <span style="color: #008000;">new</span>
    <span style="color: #008000;">&#123;</span>
        GeneralInfo <span style="color: #008000;">=</span> <span style="color: #008000;">new</span>
        <span style="color: #008000;">&#123;</span>
            Name <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;John&quot;</span>,
            Surname <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;AppleSeed&quot;</span>
        <span style="color: #008000;">&#125;</span>,
        AddressInfo <span style="color: #008000;">=</span> <span style="color: #008000;">new</span>
        <span style="color: #008000;">&#123;</span>
            Street <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Infinite Loop, 1&quot;</span>,
            Phone <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;555-1111&quot;</span>
        <span style="color: #008000;">&#125;</span>
    <span style="color: #008000;">&#125;</span><span style="color: #008000;">;</span>
&nbsp;
    <span style="color: #0600FF; font-weight: bold;">return</span> Json<span style="color: #008000;">&#40;</span>jsonData<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #008000;">&#125;</span></pre></div></div>

<p>This will have an action on the controller which will return us <b>JSON</b> data ready to be consumed by our javascript code in the view. To see how a client view would look like, consuming this data, here&#8217;s a little example using <a href="http://www.jquery.com" onclick="pageTracker._trackPageview('/outgoing/www.jquery.com?referer=');">jQuery</a>:</p>

<div class="wp_syntax"><div class="code"><pre class="js" style="font-family:monospace;">$.ajax({
    async: false,
    url: '/ControllerName/GetPersonInfo/' + id,
    type: 'POST',
    success: function (data) {
        //data here is the JSON data
       //use it however you like
    }
});</pre></div></div>

<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fthinkingeek.com%2F2010%2F11%2F16%2Fcreating-and-consuming-json-data-in-mvc-2%2F&amp;title=Creating%20and%20consuming%20JSON%20data%20in%20MVC%202" id="wpa2a_8" onclick="pageTracker._trackPageview('/outgoing/www.addtoany.com/share_save_url=http_3A_2F_2Fthinkingeek.com_2F2010_2F11_2F16_2Fcreating-and-consuming-json-data-in-mvc-2_2F_amp_title=Creating_20and_20consuming_20JSON_20data_20in_20MVC_202?referer=');"><img src="http://thinkingeek.com/wp-content/plugins/add-to-any/share_save_120_16.gif" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://thinkingeek.com/2010/11/16/creating-and-consuming-json-data-in-mvc-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Disabling UpdatePanels when an asynchronous postback in progress</title>
		<link>http://thinkingeek.com/2009/06/08/disabling-updatepanels-when-an-asynchronous-postback-is-done/</link>
		<comments>http://thinkingeek.com/2009/06/08/disabling-updatepanels-when-an-asynchronous-postback-is-done/#comments</comments>
		<pubDate>Mon, 08 Jun 2009 11:32:16 +0000</pubDate>
		<dc:creator>brafales</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[asp]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://thinkingeek.com/?p=104</guid>
		<description><![CDATA[If you&#8217;ve ever worked with relatively large UpdatePanels maybe you&#8217;ll have had a problem: blocking the user some elements while the asynchronous postback is running. When working with local or LAN environments, the async responses might be fast, but over the internet, or on large calculations the async postback may take a while. During this [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;ve ever worked with relatively large UpdatePanels maybe you&#8217;ll have had a problem: blocking the user some elements while the asynchronous postback is running. When working with local or LAN environments, the async responses might be fast, but over the internet, or on large calculations the async postback may take a while. During this period, you may want to block the UpdatePanel controls so the user can&#8217;t trigger another postback or do any other operations on that UpdatePanel. I&#8217;ll show you an easy way to do so by using the AJAX framework for .NET and <a href="http://jquery.com" onclick="pageTracker._trackPageview('/outgoing/jquery.com?referer=');">jQuery</a> and one of its plugins: <a href="http://malsup.com/jquery/block/" onclick="pageTracker._trackPageview('/outgoing/malsup.com/jquery/block/?referer=');">blockUI</a>.</p>
<p>For those who don&#8217;t know jQuery, it&#8217;s an opensource Javascript framework that <a href="http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx" onclick="pageTracker._trackPageview('/outgoing/weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx?referer=');">is going to be embedded on future versions of Visual Studio</a>. It&#8217;s a very good framework because of its simplicity and its extensibility, having lots of plugins. One of those plugins is the blockUI plugin, which allows you to block and unlock any part of the DOM at will.</p>
<p><span id="more-104"></span></p>
<p>Let&#8217;s try this with a simple example. Imagine you have an UpdatePanel with various buttons, and you want that when a user clicks on any of it, all the interactive controls of the UpdatePanel become disabled until the asynchronous response has come back and the html has been updated. To do this, we need to know when the UpdatePanel is being updated. The best way to do this is to listen to an event of the <a href="http://msdn.microsoft.com/en-us/library/bb311028.aspx" onclick="pageTracker._trackPageview('/outgoing/msdn.microsoft.com/en-us/library/bb311028.aspx?referer=');">PageRequestManager</a> object of our web page. The event is called <em>beginRequest</em> and the way we can attach to it is as follows.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Sys.<span style="color: #660066;">WebForms</span>.<span style="color: #660066;">PageRequestManager</span>.<span style="color: #660066;">getInstance</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">add_beginRequest</span><span style="color: #009900;">&#40;</span>BeginRequestHandler<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This will get the instance of the PageRequestManager object and add a listener to the event, pointed at the javascript function called <em>BeginRequestHandler</em>.</p>
<p>The next step is to actually write this function. One option here would be to manually disable all the controls inside the UpdatePanel that can trigger a postback, but that would be very tedious. Instead, I propose you a way to directly disable all the UpdatePanel. We can do so by using the blockUI plugin from jQuery.<br />
The method will look like this.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> BeginRequestHandler<span style="color: #009900;">&#40;</span>sender<span style="color: #339933;">,</span> args<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">block</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>This might need a bit of explanation. In jQuery, when using <em>$(&#8216;#element&#8217;)</em> we select the element of the DOM that has the id <em>&#8216;element&#8217;</em>. This returns a jQuery object upon which we can execute a series of commands (more on jQuery selectors on the jQuery website). Of those operations we can perform, there&#8217;s one that is provided with the blockUI plugin, and it&#8217;s called <em>block()</em>. This operation will simply block the DOM element that the jQuery selector has selected. With this simple line of code, then, we can disable an entire UpdatePanel. Since the UpdatePanel will be redrawn when the asynchronous postback comes back, it will be redrawn enabled again, so we don&#8217;t have to worry about enabling it again. </em></p>
<p><em>I suggest you visit the documentation of the blockUI plugin for more information and blocking options. In this example we simply disable the controls, but using some nice CSS you could use messages and html elements to notice the user that something is going to happen, like a nice <em>Loading</em> meassage or something similar.</p>
<p>Note that this will only work if you have only one UpdatePanel on the web page and all the controls that cause an asynchronous postback are inside the UpdatePanel. However, playing with the <em>sender</em> and <em>args</em> parameters of the <em>BeginRequestHandler</em> method, you can add some logic to decide which controls and UpdatePanels to block. I recommend visiting the <a href="http://msdn.microsoft.com/en-us/library/bb311028.aspx" onclick="pageTracker._trackPageview('/outgoing/msdn.microsoft.com/en-us/library/bb311028.aspx?referer=');">PageRequestManager</a> page documentation for more information.</p>
<p>Finally, here&#8217;s a fully working example of a very simple web page. Notice that you&#8217;ll have to download <em>jquery.js</em> and <em>jquery.blockUI.js</em> from both websites I mentioned earlier.</p>
<p>Default.aspx.</p>

<div class="wp_syntax"><div class="code"><pre class="asp" style="font-family:monospace;">&nbsp;
    <span style="color: #006600; font-weight: bold;">&lt;</span>script src<span style="color: #006600; font-weight: bold;">=</span><span style="color: #cc0000;">&quot;jquery.js&quot;</span> type<span style="color: #006600; font-weight: bold;">=</span><span style="color: #cc0000;">&quot;text/javascript&quot;</span><span style="color: #006600; font-weight: bold;">&gt;&lt;!</span>--mce<span style="color: #006600; font-weight: bold;">:</span><span style="color: #800000;">0</span>--<span style="color: #006600; font-weight: bold;">&gt;&lt;/</span>script<span style="color: #006600; font-weight: bold;">&gt;</span>
    <span style="color: #006600; font-weight: bold;">&lt;</span>script src<span style="color: #006600; font-weight: bold;">=</span><span style="color: #cc0000;">&quot;jquery.blockUI.js&quot;</span> type<span style="color: #006600; font-weight: bold;">=</span><span style="color: #cc0000;">&quot;text/javascript&quot;</span><span style="color: #006600; font-weight: bold;">&gt;&lt;!</span>--mce<span style="color: #006600; font-weight: bold;">:</span><span style="color: #800000;">1</span>--<span style="color: #006600; font-weight: bold;">&gt;&lt;/</span>script<span style="color: #006600; font-weight: bold;">&gt;</span>
&nbsp;
<span style="color: #006600; font-weight: bold;">&lt;</span>form id<span style="color: #006600; font-weight: bold;">=</span><span style="color: #cc0000;">&quot;form1&quot;</span><span style="color: #006600; font-weight: bold;">&gt;</span>
<span style="color: #006600; font-weight: bold;">&lt;</span>div<span style="color: #006600; font-weight: bold;">&gt;</span>
&nbsp;
    <span style="color: #006600; font-weight: bold;">&lt;</span>script type<span style="color: #006600; font-weight: bold;">=</span><span style="color: #cc0000;">&quot;text/javascript&quot;</span><span style="color: #006600; font-weight: bold;">&gt;&lt;!</span>--mce<span style="color: #006600; font-weight: bold;">:</span><span style="color: #800000;">2</span>--<span style="color: #006600; font-weight: bold;">&gt;&lt;/</span>script<span style="color: #006600; font-weight: bold;">&gt;&lt;/</span>div<span style="color: #006600; font-weight: bold;">&gt;</span>
<span style="color: #006600; font-weight: bold;">&lt;/</span>form<span style="color: #006600; font-weight: bold;">&gt;</span></pre></div></div>

<p>Default.aspx.cs.</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System</span><span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System.Collections.Generic</span><span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System.Web</span><span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System.Web.UI</span><span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System.Web.UI.WebControls</span><span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System.Threading</span><span style="color: #008000;">;</span>
&nbsp;
<span style="color: #0600FF; font-weight: bold;">namespace</span> UpdatePanelBlockExample
<span style="color: #008000;">&#123;</span>
    <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">partial</span> <span style="color: #6666cc; font-weight: bold;">class</span> _Default <span style="color: #008000;">:</span> <span style="color: #000000;">System.<span style="color: #0000FF;">Web</span><span style="color: #008000;">.</span><span style="color: #0000FF;">UI</span></span><span style="color: #008000;">.</span><span style="color: #0000FF;">Page</span>
    <span style="color: #008000;">&#123;</span>
        <span style="color: #0600FF; font-weight: bold;">protected</span> <span style="color: #6666cc; font-weight: bold;">void</span> Page_Load<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> sender, EventArgs e<span style="color: #008000;">&#41;</span>
        <span style="color: #008000;">&#123;</span>
            Thread<span style="color: #008000;">.</span><span style="color: #0000FF;">Sleep</span><span style="color: #008000;">&#40;</span><span style="color: #FF0000;">3000</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
            Label1<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> DateTime<span style="color: #008000;">.</span><span style="color: #0000FF;">Now</span><span style="color: #008000;">.</span><span style="color: #0000FF;">ToLongDateString</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
        <span style="color: #008000;">&#125;</span>
&nbsp;
        <span style="color: #0600FF; font-weight: bold;">protected</span> <span style="color: #6666cc; font-weight: bold;">void</span> Button1_Click<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">object</span> sender, EventArgs e<span style="color: #008000;">&#41;</span>
        <span style="color: #008000;">&#123;</span>
            Thread<span style="color: #008000;">.</span><span style="color: #0000FF;">Sleep</span><span style="color: #008000;">&#40;</span><span style="color: #FF0000;">3000</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
            Label1<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> DateTime<span style="color: #008000;">.</span><span style="color: #0000FF;">Now</span><span style="color: #008000;">.</span><span style="color: #0000FF;">ToShortDateString</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
        <span style="color: #008000;">&#125;</span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span></pre></div></div>

<p></em></p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fthinkingeek.com%2F2009%2F06%2F08%2Fdisabling-updatepanels-when-an-asynchronous-postback-is-done%2F&amp;title=Disabling%20UpdatePanels%20when%20an%20asynchronous%20postback%20in%20progress" id="wpa2a_10" onclick="pageTracker._trackPageview('/outgoing/www.addtoany.com/share_save_url=http_3A_2F_2Fthinkingeek.com_2F2009_2F06_2F08_2Fdisabling-updatepanels-when-an-asynchronous-postback-is-done_2F_amp_title=Disabling_20UpdatePanels_20when_20an_20asynchronous_20postback_20in_20progress?referer=');"><img src="http://thinkingeek.com/wp-content/plugins/add-to-any/share_save_120_16.gif" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://thinkingeek.com/2009/06/08/disabling-updatepanels-when-an-asynchronous-postback-is-done/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

