Home > Programming, jQuery > Using ui autocomplete as a dropdown, with type in

Using ui autocomplete as a dropdown, with type in

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 why but it was just a tad short of what I wanted to do, and I’m still quite a javascript novice.

I came up with a way to use the jQuery UI autocomplete widget as a <select> that you could also type in something if the choices in the dropdown didn’t fit your needs.

ui-autocomplete-dropdown

This example uses a local data source, but you can come up with creative ways to use remote JSON sources if you like.

<script type="text/javascript">
	$(document).ready(function() {

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

		$(".ui_dropdown").click(function(){

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

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

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

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

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

	});
</script>

In this script I am using the input id’s to define the data source.

Categories: Programming, jQuery Tags:
  1. May 7th, 2010 at 19:50 | #1

    Great information was shared in this post…
    Thank you for the post..

  2. March 18th, 2013 at 00:46 | #2

    It is superior to be examining your post Using ui autocomplete as a dropdown, with type in, and who besides will examine it he will absolutely get a lot of supplementary.

  1. April 1st, 2010 at 10:31 | #1
  2. April 1st, 2010 at 11:10 | #2
  3. April 1st, 2010 at 11:28 | #3
  4. April 1st, 2010 at 11:36 | #4
  5. April 1st, 2010 at 11:50 | #5
  6. April 1st, 2010 at 11:54 | #6
  7. April 1st, 2010 at 12:03 | #7
  8. April 1st, 2010 at 12:09 | #8
  9. April 1st, 2010 at 12:11 | #9
  10. April 1st, 2010 at 12:16 | #10
  11. April 1st, 2010 at 12:27 | #11
  12. April 1st, 2010 at 12:28 | #12
  13. April 1st, 2010 at 12:28 | #13
  14. April 1st, 2010 at 14:09 | #14
  15. April 1st, 2010 at 14:46 | #15
  16. April 1st, 2010 at 14:54 | #16
  17. April 1st, 2010 at 15:24 | #17
  18. April 1st, 2010 at 15:33 | #18
  19. April 8th, 2010 at 15:09 | #19