| Page 1 of 1 | [ 8 posts ] |
|
In my project(pretty big in size), I've created a time input text field that's supplemented with the YUI autocomplete widget. The user can enter the time manually or by selecting one of the list options of AC. When the user enters it manually, onblur of the textbox, the time is automatically formatted as required. (to the 12-hour AM/PM format)
The datasource(local) is the following JSON object: var timeDS = ["12:00 AM","12:15 AM","12:30 AM",....."12:45 PM"]; I've added an additional functionality that onfocus or onclick of the textbox, the autocomplete will query with the first digit of his previous input(or an empty string otherwise). For instance, if he had entered "2:00 PM" previously, the autocomplete will show options of all times starting with 2. Now my problem is that when the user first does a manual entry, the autocomplete list shows up alright, but the last few options do not accept a mouse click for input. I am able to select all options, including the problematic last 2-3 ones thru arrow keys + enter/tab. When I put in some javascript debuggers, I saw that clicking last 2-3 options triggered the unmatchedItemSelect event, instead of the itemSelectEvent (EVEN though I selected the option thru the container!) Anyone understand the problem? |
Alberto SantiniYUI Contributor
|
Hello Vinod.
It would be better if you provide a snippet, maybe using jsfiddle. Regards, IceBox |
|
Hi Alberto,
I was able to replicate the problem in a small-sized page, having nothing but the textbox and div elements in the body of the page. Here's a snippet: Code: <script type="text/javascript"> var timeDS = ["2:00 AM","2:15 AM","2:30 AM","2:45 AM","2:00 PM","2:15 PM","2:30 PM","2:45 PM"] function MyOnload() { InitTimeAutocomplete("myTime", "myDiv"); } function OnblurTimeInput(timeTextId) { // compute formatted time from textbox value // set value to textbox document.getElementById(timeTextId).value = "2:00 AM"; } var InitTimeAutocomplete = function(elemId, containerId) { var textbox = document.getElementById(elemId); var oDS = new YAHOO.util.LocalDataSource(timeDS); oDS.responseSchema = {fields : ["time"]}; var oAC = new YAHOO.widget.AutoComplete(elemId, containerId, oDS); oAC.prehighlightClassName = "yui-ac-prehighlight"; oAC.useShadow = true; oAC.minQueryLength = 0; oAC.maxResultsDisplayed = 100; oAC.queryDelay = 0; oAC.autoHighlight = false; oAC.itemSelectEvent.subscribe(function() { alert('Item Selected'); }); oAC.containerCollapseEvent.subscribe(function() { document.getElementById(containerId).style.display = "none"; }); oAC.containerPopulateEvent.subscribe(function() { document.getElementById(containerId).style.display = "block"; }); textbox.onfocus = textbox.onclick = function()//opencontainer onfocus or onclick of textbox { if(textbox.value == '') { oAC.sendQuery(''); } else { oAC.sendQuery(textbox.value.split(":")[0] + ":"); } } } </script> The body of the page, as I said, is extremely simple. Just the two minimal elements and the necessary css classes('yui-skin-sam' etc), and event handler assignments(onload, onblur etc.) |
Alberto SantiniYUI Contributor
|
Hello Vinod.
This is a working example: http://jsfiddle.net/qyFVP/ I don't understand what you are trying to do tweaking with Collapse or Populate events. Hope that helps, IceBox P.S.: I added click handling: http://jsfiddle.net/qyFVP/5/ I don't see any issue. |
|
Hi Alberto,
Thanks for your help. However, I'm able to replicate my problem even with the code you gave me. Please check: http://jsfiddle.net/qyFVP/4/ I have made just 2 changes to the code: 1. Defined on onfocus event handler for the textbox, so all list options are visible onfocus of the textbox. Code: document.getElementById("myInput").onfocus = function() { oAC.sendQuery(""); } 2. Set the minQueryLength property to 0. To reproduce my bug, try the following steps: 1. Enter free text input "2 am", then tab out. 2. Focus back into the textbox and try to select any of the list options. You'll see that mouseclick does not work. Arrow keys + tab/enter works, only mouseclick does not! |
|
Hi Alberto,
I replied earlier to your post, but since I'm a recent joiner, my post hasn't been approved yet. Even in your latest code update at http://jsfiddle.net/qyFVP/5/ Please try the following: 1. Enter free text, let's say "2 PM" and tab out(because this textbox is meant to accept free-text as well as autocomplete options). 2. Click back on the textbox and try to select an option, especially the last few options. You should notice that click inputs do not work. Only keyboard arrow keys + tab/enter works. |
Alberto SantiniYUI Contributor
|
Hello Vinod.
Reproduced. Good catch. I tried to clean the input field before the click [1], because I thought it was something out of sync, but I was not success. The widget behaviour is fine again after using the keyboard. No idea how to fix it and YUI 2 is frozen. Any reason not to use YUI 3? Last try may be asking in irc channel for a quick feedback. Regards, IceBox [1] http://jsfiddle.net/qyFVP/6/ |
|
Hi Alberto,
I tried the same thing - clearing up the text box value before the sendQuery() call, to no avail. I also tried debugging the autocomplete.js library file, tracking the containerClick and textboxBlur events, finding some anomalies, for eg. the target of the containerClick was the 'ul' element, instead of the 'li' element, in this buggy situation. Anyhow, thanks a lot for your help! I am considering starting to use YUI-3 components in the near future. Regards, Vinod. |
| Page 1 of 1 | [ 8 posts ] |
| 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 |
© 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