<?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>Beginnercode.com &#187; jQuery</title>
	<atom:link href="http://www.beginnercode.com/category/computing/programming/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.beginnercode.com</link>
	<description>The adventures of an amateur coder</description>
	<lastBuildDate>Wed, 27 Apr 2011 20:07:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<image>
  <link>http://www.beginnercode.com</link>
  <url>http://www.beginnercode.com/wp-content/themes/neuron/favicon.ico</url>
  <title>Beginnercode.com</title>
</image>
		<item>
		<title>Using ui autocomplete as a dropdown, with type in</title>
		<link>http://www.beginnercode.com/2010/04/01/using-ui-autocomplete-as-a-dropdown-with-type-in/</link>
		<comments>http://www.beginnercode.com/2010/04/01/using-ui-autocomplete-as-a-dropdown-with-type-in/#comments</comments>
		<pubDate>Thu, 01 Apr 2010 15:25:46 +0000</pubDate>
		<dc:creator>^Lestat</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.beginnercode.com/?p=298</guid>
		<description><![CDATA[I had been using an autocomplete plugin by bassistance. 2 months later jQuery UI added autocomplete to their list of widgets. Like many plugins out there I was unable to find an autocomplete that was easy to use for my purposes. The closest I recently came to was the sexy combo plugin. I cant remember [...]]]></description>
			<content:encoded><![CDATA[<p>I had been using an autocomplete plugin by <a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">bassistance</a>. 2 months later jQuery UI added autocomplete to their list of widgets. Like many plugins out there I was unable to find an autocomplete that was easy to use for my purposes. The closest I recently came to was the <a href="http://code.google.com/p/sexy-combo/">sexy combo plugin</a>. I cant remember why but it was just a tad short of what I wanted to do, and I&#8217;m still quite a javascript novice.</p>
<p>I came up with a way to use the jQuery UI autocomplete widget as a &lt;select&gt; that you could also type in something if the choices in the dropdown didn&#8217;t fit your needs.</p>
<p><img src="http://www.beginnercode.com/wp-content/imgupload/2010/04/ui-autocomplete-dropdown.jpg" alt="ui-autocomplete-dropdown" title="ui-autocomplete-dropdown" width="431" height="229" class="aligncenter size-full wp-image-304" /></p>
<p>This example uses a local data source, but you can come up with creative ways to use remote JSON sources if you like.</p>
<div style="margin:10px 0 20px 0;text-align:center;"><a href="http://www.library.beginnercode.com/jQuery/ui/autocomplete.php" target="_blank">Click here for the demo</a></div>
<pre class="brush: php;">
&lt;script type=&quot;text/javascript&quot;&gt;
	$(document).ready(function() {

		// dropdown/ auto suggest
		$(&quot;.ui_dropdown&quot;).autocomplete({
			minLength: 0,
			delay: 0
		});

		$(&quot;.ui_dropdown&quot;).click(function(){

			var input = $(this);
			var inputID = input.attr('id');

			// close if already visible
			if (input.autocomplete(&quot;widget&quot;).is(&quot;:visible&quot;)) {
				input.autocomplete(&quot;close&quot;);
				return false;
			}

			// set source(s)
			var myData = '';
			if(inputID == 'input1'){
				myData = [&quot;foo&quot;,&quot;bar&quot;,&quot;hello&quot;,&quot;world&quot;];
			} else {
				myData = [&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;];
			}

			// load source
			input.autocomplete({
				source: myData
			});

			// fire search event
			input.autocomplete(&quot;search&quot;, &quot;&quot;);
			input.focus();
			return false;
		});		

	});
&lt;/script&gt;
</pre>
<p>In this script I am using the input id&#8217;s to define the data source.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.beginnercode.com/2010/04/01/using-ui-autocomplete-as-a-dropdown-with-type-in/feed/</wfw:commentRss>
		<slash:comments>41</slash:comments>
		</item>
	</channel>
</rss>

