lorenzoongithub / completely Goto Github PK

Lorenzo, great script. I have a doubt regarding the use of these examples. in booking page you say a "form - which would consist of many check-boxes, radio-buttons, drop-downs - is stripped to just one text box"
If i want to create a form, where do we assign values to pass? in booking example you have ->id: ->options. but no form element name or similar to pass with the submit button. sorry, probably is more related to the use of javascript but im confused in the way i have to use it. thank you so much for any clarification, brgds

Hi, I'm new to JS, so I'm not sure if this is an issue with your library itself. I'm trying to perform a case-insensitive search on my webpage and seems to me that completely doesn't support it (or I might be doing it wrong). Could you help me out?

Great job, but it would be nice to populate the options from MYSQL.

To install this package via bower, it's necessary, that every version is tagged. Another option would be, to move the code to the master branch (so that it's installable as "dev-master" version), but I remember you said, that's not what you are planning.

Hi, why you don't have code of complete.ly.1.0.1.js on github?

The input placeholder is misaligned if the user has typed enough into the text input that text starts scrolling over, because the placeholder position calculation doesn't account for that.

for example, set a width of 100px to the text input on the draw a robot demo and start typing something like "paint nose aqua" - http://complete-ly.appspot.com/examples/draw.a.robot.html

it may be rare for many users of this library (which is fantastic, by the way), but I'm going to need to come up with a solution somehow. Is this something you've considered / encountered?

There is an issue in this mode of the IE and it is caused because the two inputs are with transparent background and there is a bug in IE where input with transparent background is not clickable.Therefore I`ve changed the background of the top input with 1px transparent png for IE8.

not working:
// txtInput.style.backgroundColor = config.backgroundColor;

working:
txtInput.style.background = "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=)";

Bug is described here:
http://stackoverflow.com/questions/2098714/input-boxes-with-transparent-background-are-not-clickable-in-ie8

as far as I can tell, the onEnter event handler is never invoked because the dropdown visibility check (var wasDropDownHidden = (dropDown.style.visibility == 'hidden');) occurs just before the dropdown is actually hidden

For multi-line texts.

I've asked about this already on SO, but nobody's answered, so I thought I should go to the source, since this could also be an issue that should be addressed. Now, I admit I don't have a whole ton of experience with Javascript, but it appears that there is no way to check if complete.ly's input field has focus. Am I wrong about that, or is my inexperience showing here?

Hello, I like your lightweight script. My obstacle is I don't know the $variable name of the field? I've added a submit button and wrapped it with an html form, which I'm sending as a GET request to another page with the variable q=searched word. But how do I make $q = what the user types in completely? Thank you.

Thank you for this beautiful small script!
A native support of input-text-fields instead of divs would be nice. I am aware of this http://stackoverflow.com/questions/20317234/use-complete-ly-with-a-input-text-box, but next you have to listen to the return event and so on. With a support of input-text-field it would be easier to use the script for a search-field.

Not a big trouble, but it makes me a bit uncomfortable. Do I have the right code? ;-)

See http://lorenzoongithub.github.io/completely/complete.ly.1.0.1.js

hey
nice script. but can be made more user friendly if tab selection is also there.

any case. great work.

hideDropDown() is missing from the minified version on the complete-ly site.

I have a suggestion re the UI (hope it's OK to post here, your site asks for suggestions to be logged on GitHub). :)

The norm for escaping a form select list in browsers includes pressing Esc or clicking away from the list. However, complete.ly doesn't seem to handle that and the list remains in view. Would be great to replicate the same UI escaping.

On a similar note, would be great if users could press Tab (or shift+Tab) to move onto the next form field (or back to a previous). It's great that users can hit Tab or Enter to use the hint value, but then hitting Tab keeps focus on complete.ly.

Great work on this, very useful! Is there any way to make it case insensitive? It seems to be case sensitive by default, which unfortunately isn't so useful for me.

I have a list of universities and they need to be upper and lower case, ie:
UHI Millennium Institute

If I begin typing 'uhi' I of course get nothing, but start typing 'UHI' and it works great.

You can repro this in the demos:
http://complete-ly.appspot.com/examples/booking.html

When I press a key that doesn't change the contents of the text box, the box isn't repainted and the gray text goes away.

If you setText('xyz'), then highlight the text and hit delete or backspace keys it doesn't fire the onChange event.

Enter "document." and then use down arrow. When the last (bottom) alternative is passed the next alternative is copied to the input field and the focus is set to the input field.

The expected behavior is of course that the list with alternatives is scrolled.

In example http://complete-ly.appspot.com/examples/web.browser.console.html
Using Chrome Version 39.0.2171.95 m

Hey, maintainer(s) of lorenzoongithub/completely!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library lorenzoongithub/completely is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "lorenzoongithub/completely",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Enabled like this. Currently developing it in my forked branch.
Add ignoreCase:true to config parameters when building completely

Hi,

Thank you for an awesome plugin.
I figured a bug in your plugin that the dropdown will stay out of the input field if there is a width limit to the wrapper and the input text is longer than that width limit.

I edit the calculateWidthForText() function in your code.
Instead of returning the actual spacer

return spacer.getBoundingClientRect().right; 

the function will return the wrapper width if the spacer right exceeds the width

if (spacer.getBoundingClientRect().right > wrapper.getBoundingClientRect().width)
     return wrapper.getBoundingClientRect().width; 
else 
     return spacer.getBoundingClientRect().right; 

would be quite difficult to track changes ;)

hey
thanks for the tab feature. now, what if you had to modify the statement that you had chosen. for example, like
i need a flight from london to paris.

now if i had to choose a train, presently, i have to delete the sentence completely, then type and choose the train option, and go over again choosing the places.

what if there is a way to just click on "i need a flight", dropdown appears, choose that particular option, and ur done, without starting again to choose the places.

thanks.

Does completely already support text wrapping? If not, is there a workaround?

Hello,

I'm implementing this lovely piece of code into a new project, and I have some users that are stuck (corporate policy) to Firefox 3.5.9. Complete.ly won't launch on this firefox version due to line 34:

var txtHint = txtInput.cloneNode();

Stating that there is an argument missing:

The fix for this is quite simple:

var txtHint = txtInput.cloneNode(true);

Assuming the behaviour you intended is a deep clone and not a shallow one (According to the MDN (https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode) the default assumption between FF 13-28 was true, starting from 29 it is false. They recommend adding the argument always).

I hope its OK to post this here... I saw other posts regarding the use of the TAB so I figured I'd post a new item instead of commenting in one of the older issues; especially since they have been closed..?

Essentially, I would like to change two things.1. Stop giving focus to the cloned 'hint' node. 2. Be able to move beyond the txtInput field after I have accepted a value; using the TAB.

This could be accomplished by:
Adding this attribute def.

txtHint.tabIndex = '-1'; // won't work in all browsers...http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/ 

Adding this var before the keyDownHandler

var lastKeyHandled = ''; // see if stmt below

And replacing this:

if (keyCode == 9) { // for tabs we need to ensure that we override the default behaviour: move to the next focusable HTML-element 
                e.preventDefault();
                e.stopPropagation();
                if (txtHint.value.length == 0) {
                    rs.onTab(); // tab was called with no action.
                                // users might want to re-enable its default behaviour or handle the call somehow.
                }
            }

With this:

if (keyCode == 9) { // for tabs we need to ensure that we override the default behaviour: move to the next focusable HTML-element 
               if(keyCode != lastKeyHandled){ // if the tab was the last keyCode handled, allow movement to next tab index item
                  if ( e.preventDefault ) e.preventDefault();
                  //e.preventDefault(); IE Error
                  if ( e.stopPropagation ) e.stopPropagation();
                  //e.stopPropagation(); IE Error
                  if (txtHint.value.length == 0) {
                    rs.onTab(); // tab was called with no action.
                                // users might want to re-enable its default behaviour or handle the call somehow.
                  }
               }
            }
            lastKeyHandled = keyCode; //

Tab keys not working...I mean the accesskey, i have a big form designed using this tool.

Actually nice library! Unfortunately I think I can't use it in my case.

For example, if the words are:

• Red car
• Blue crystal cycle

If we type "cycle", it won't select "Blue cycle". It won't select anything.

Anyway thanks for your library!

Carlos

I think, in specific cases, there would be good to have possibility to turn off the plugin.
(Like in react componentDidMount,componentWillUnmount, to prevent leakage).