Forums

Board index » YUI 3 Gallery Forums: » Gallery Forums » AutoComplete

Page 1 of 1   [ 8 posts ]
New Topic | Post Reply | Print view

Marc

YUI Contributor

  • Offline
  • Profile
Tags:

Fixed current version of autocomplete and added id-value

Post Posted: Tue Jun 08, 2010 4:43 pm
+0-
Hi,

Attached is my fixed version of the autocomplete module.
I've made a few changes:
* tab: hide autocomplete menu (as you are usually tabbing between form values
* added the concept of id-value pairs. this version now expects an array of {id:'12',label:'my label'}
when you select an element in the autocomplete list the ac:selectedElement is fired, which contains the id and label as attributes.

What I think the utility still needs is a timeout when people are typng, now it tends to throw a request out whenever the character boundary is crossed. But when people are typing fast, I wonder if this is desirable.

Hmm, it looks like I can't attach anything here. Reply to this post if you want me to send you the code.

Cheers,

Marc

Marc

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Fixed current version of autocomplete and added id-value

Post Posted: Thu Jun 10, 2010 3:00 am
+0-
Created an another new and improved version. The final list of changes:
* Fixed syntax error (current gallery version has some errors)
* Added support for tab => close widget
* Prevent return from submitting form on widget form element. It closes widget instead
* Clicking outside widget closes widget
* Changed the input data format to array of {id:'12',label:'my label'}
* Fire ac:selectedElement event when an item is selected with id and label as attributes.
* fixed case sensitivity higlighting
* Added menuitem classes (should prob be widget classes, but I figured most people would want their widget menu to look the same as their menu)
* replace widget with overlay, with support for zIndex and alignment, etc

Works really smoothly now.
Code:
var autoComp = new Y.ACWidget({
   ac : node.plug(Y.Plugin.ACPlugin, {
      queryTemplate : function (q) { return "qry="+ encodeURIComponent(q) },
      dataSource : new Y.DataSource.IO({
         source : baseUrl + '/json/getcities.json?'
      }).plug({fn : Y.Plugin.DataSourceJSONSchema, cfg : {
         schema : { resultListLocator : "result" }
      }}),
   }).ac,
   zIndex:100,
   align: {node:node,points:["tl","bl"]}
   
}).render();
autoComp.on('ac:selectedElement',function(e,value,label){
   document.getElementById('ac-id').value = value;
});

paulie

  • Username: paulie
  • Joined: Tue Apr 21, 2009 3:56 pm
  • Posts: 21
  • Offline
  • Profile
Tags:

Re: Fixed current version of autocomplete and added id-value

Post Posted: Fri Aug 13, 2010 8:07 am
+0-
Hi Marc,

So, you've gotten the autocomplete to work? Great!

I'd love a copy of the code!

My email can be constructed from the following:

paul
performantsoftware
com

Thanks!

paulie

  • Username: paulie
  • Joined: Tue Apr 21, 2009 3:56 pm
  • Posts: 21
  • Offline
  • Profile
Tags:

Re: Fixed current version of autocomplete and added id-value

Post Posted: Mon Aug 16, 2010 11:18 am
+0-
Thanks Marc!

I've gotten it almost working.

However, clicking another control doesn't hide the autocomplete menu, neither does the tab key, the enter key, or the esc key. Nor does clicking one of the suggestions. In fact, I haven't figured out anything that will get rid of the dropdown.

So there is still one detail that I don't have.

paulie

  • Username: paulie
  • Joined: Tue Apr 21, 2009 3:56 pm
  • Posts: 21
  • Offline
  • Profile
Tags:

Re: Fixed current version of autocomplete and added id-value

Post Posted: Tue Aug 17, 2010 8:37 am
+0-
I've tried to trace through to find out what is keeping it from closing.

It definitely executes this line:

close : function () { this.fire("ac:hide") }

So it is paying attention to the clicks and key presses ok. I can't trace it into the fire() function, but I notice:

ac.on("ac:hide", widget.hide, widget); //INHERITED

so I'm guessing that it is expecting the widget.hide() function to do the hiding. I don't know if it is getting there or not.

I'm just including the js files directly, not using the YUI loader for them. I don't know if that means that I'm missing a dependency or something.

Any clues about how to go about debugging what is happening after the this.fire("ac:hide") line?

paulie

  • Username: paulie
  • Joined: Tue Apr 21, 2009 3:56 pm
  • Posts: 21
  • Offline
  • Profile

Re: Fixed current version of autocomplete and added id-value

Post Posted: Tue Aug 17, 2010 11:16 am
+0-
Never mind, it was working. I just needed this CSS:

.yui3-acwidget-hidden ul {
display: none;
}

Marc

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Fixed current version of autocomplete and added id-value

Post Posted: Wed Aug 18, 2010 1:52 am
+0-
paulie wrote:
Never mind, it was working. I just needed this CSS:

.yui3-acwidget-hidden ul {
display: none;
}


Ok, cool. Let me know how it works out for you.

mc_hendriks

  • Joined: Sat Apr 24, 2010 5:53 am
  • Posts: 43
  • Offline
  • Profile
Tags:

Re: Fixed current version of autocomplete and added id-value

Post Posted: Thu Sep 09, 2010 11:07 am
+0-
Hi Marc,

I'd love a copy of the code!

My email can be constructed from the following:

mhendriks
digirent
nl

Thanks!
Page 1 of 1   [ 8 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group