Jump to Navigation

jQuery Autocomplete and a Data Set

  • strict warning: Non-static method view::load() should not be called statically in /home1/salonfal/public_html/drupal6/sites/all/modules/views/views.module on line 1118.
  • strict warning: Declaration of views_handler_field::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_field.inc on line 1148.
  • strict warning: Declaration of views_handler_sort::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_sort::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_sort::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_filter.inc on line 599.
  • strict warning: Declaration of views_handler_filter::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_filter.inc on line 599.
  • strict warning: Declaration of views_plugin_query::options_submit() should be compatible with views_plugin::options_submit($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_query.inc on line 181.
  • strict warning: Declaration of views_plugin_style_default::options() should be compatible with views_object::options() in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_style_default.inc on line 24.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_row.inc on line 136.
  • strict warning: Non-static method view::load() should not be called statically in /home1/salonfal/public_html/drupal6/sites/all/modules/views/views.module on line 1118.

Recent Comments

There are a number of ways you could go about "pausing" the slideshow on hover.  I would take a...

Hi,
I love the featured content fader... I actually prefer this over a traditional slider because the effect...

Hi,
Thanks for your posting. It is a great image gallery.
Thanks again. Regards.

Great example, this is a good basic structure for anyone who is new to web development. Thanks.

Hey Tom,

Working with arrays in javascript is pretty easy.  First off you'll need to declare it...

jQuery Autocomplete and a Simple Data Set

Using the jQuery autocomplete plugin with a data set can be a bit tricky to get working.  The following is a simple tutorial on getting it setup and working.

You'll need the jQuery autocomplete plugin and of course jQuery.

Create your input box that you want the autocomplete to fire on.


The HTML:

<div>
  <input id="autoComplete" />
</div>


The jQuery:

var data = [ 
  {text:'Web Design', url:'  http://www.nimpkish.com/web-design'},
  {text:'Web Development', url:'http://www.nimpkish.com/web-development'}, 
  {text:'Drupal Development', url:'http://www.nimpkish.com/drupal-development'}, 
  {text:'Graphic Design', url: 'http://www.nimpkish.com/graphic-design'}
];

$('#autoComplete').autocomplete(data, {
  formatItem: function(item) { 
    return item.text;
  } 
}).result(function(event, item) {
  location.href = item.url;
});


The Demo:

Comments

Hey Tom,

Working with arrays in javascript is pretty easy.  First off you'll need to declare it as a variable.

var data = [];

data is going to be our array.  Now let's throw in our data into the array.

var data = [
 {text:'Web Design', url:' http://www.nimpkish.com/web-design'},
 {text:'Web Development', url:'http://www.nimpkish.com/web-development'},  {text:'Drupal Development', url:'http://www.nimpkish.com/drupal'},
 {text:'Graphic Design', url: 'http://www.nimpkish.com/graphic-design'}
];

That should do the trick!

Hello. First of all, great tutorial. Anyhow, I've been struggling as I'm trying to create my data variable from a text. For example, if I have the text :

{text:'Web Design', url:' http://www.nimpkish.com/web-design'},
{text:'Web Development', url:'http://www.nimpkish.com/web-development'}, 
{text:'Drupal Development', url:'http://www.nimpkish.com/drupal'}, 
{text:'Graphic Design', url: 'http://www.nimpkish.com/graphic-design'}

and I do : var data=[$("#data").text().split("//")]; $("#autocomplete").autocomplete(data, { formatItem: function(item) { return item.text; } }).result(function(event, item) { location.href = item.url; }); That is not working, because my "data" is not a item array. Do you know how to make it as an item array, by any chance ? Thank you very much in advance. Tom

Post new comment