I currently use #Slack and I find its auto complete functionality very refreshing, as I am able to type in # and it will return a list of available commands, as well as me typing # and it will return a list of available users for me to notify.
So I was wondering what auto complete libraries there are out there that allow contextual auto completion rather than it just being the first letters entered. Here is an example of what I mean:
I know that there is jquery ui autocomplete, but could not find much resource on how to get it to act contextual rather than just on first entry and a search for contextual autocomplete does not bring back much results. I know stackoverflow does something similar for its tags so it may just be the correct terminology for this behaviour that I need to constrain my search, but if anyone can point me in the direction of some way to achieve this functionality without hand rolling it, I would be very happy :)
So far this seems to be the closest thing I can find:
https://github.com/podio/jquery-mentions-input
And also it appears that autosuggest is also a thing, so that may be more inline with what I am after, I will not accept this answer in the hope that someone else can point me at a library or even tell me what library #Slack uses to achieve its functionality.
As I already have 3 people wanting to close the question I will assume this will crash and burn in about 5 minutes so incase anyone else is a bit confused as to what you should be looking for here was the only other useful SO article I found relating to this topic.
Facebook style JQuery autocomplete plugin
== UPDATE ==
In the end I finally found: https://github.com/yuku-t/jquery-textcomplete which fits my scenario perfectly and seems maintained, so this would be the one I would opt for.
Complete.ly is a more complete solution : http://complete-ly.appspot.com/ You can define what will be acceptable knowing different context.
Related
I'm not sure if the name "scroll bar" is true at all. I would like to install a scrollbar, in which you can simply select a city with the mouse wheel (on a smartphone with a wipe) and then select the possible cities of the respective country in the second window.
I mean something like this has already been seen but unfortunately I could not find a good example.
Does anyone know the exact name and has perhaps a sample code?
Updated the answer as per comment
I think you better use Select2 for this.
You can find all the details and support you need in its Basic Usage page.
And about your Question - only post question if you have tried solving it by your self (if you have tried, post the method you have tried with a sample code) or try Googling it, this may help more than you know.
Update2
As per your comment, i understand that what you need is a spinner in this case you can use Input Spinner Plugin for this. You will need some styling changes but this will work your way.
Hope this was helpful for you.
I want to create a bookmarklet that I can drop on my browser's bookmark toolbar which, when clicked, inserts a fixed, predefined text (in my use case, a shruggie: ¯\_(ツ)_/¯ ) at the current cursor position (assuming that the cursor is in an editable input field or textarea). However, I am a beginner at JavaScript, and can't figure out how to get started doing this. Any help? If I can get a pointer in the right direction, I can probably figure it out from there. Thanks!
Apologies for the delay; life threw a few curveballs at me right about the time I posted the question, and I forgot about this until StackOverflow notified me of the responses tonight.
The comment by afuous gave me everything I was looking for, and I now have a working bookmarklet. For anyone else who comes across this, here it is:
javascript:(function(a){a.value=a.value.slice(0,a.selectionStart)+"%C2%AF\\_(%E3%83%84)_/%C2%AF"+a.value.slice(a.selectionEnd);})(document.activeElement);
Or, as JavaScript that hasn't been converted to bookmarklet form:
(function (a) {
a.value =
a.value.slice(0, a.selectionStart) +
"¯\\_(ツ)_/¯" +
a.value.slice(a.selectionEnd);
})(document.activeElement);
This has the benefit of allowing for me to select a portion of a text and use the bookmarklet to replace the selection with a shruggie, as if I had hit a hypothetical shruggie key on the keyboard.
Feel free to steal and modify as you see fit. This has been tested only in Firefox 50.0.2, but I think it should work in all modern browsers. (It won't work in Internet Explorer 8 or earlier.)
CSS Tricks has an article that explains how to do that and more. I'm well aware link only answers are less than ideal here, however the question is asking for pointers in the right direction, so I believe its a good fit.
The bookmarklet from the tutorial prefills forms, so essentially you are going to want to gut it, but first peek into how it is finding form controls and prefilling them. Then tweak to fit your desired functionality, and finally rip everything else out that you do not need or use.
Prefilling Forms Custom Bookmarklet
I'm looking for a jQuery tagging/autocomplete plugin where I tags can be inserted mid-order - and control over this is possible with the mouse.
I've gone through everything I can find, but am yet to find a plugin with all the requirements I'm looking for. I'm looking for a Facebook-esque tagging plugin, yet I'll be working with pre-defined phrases, and building them up into a paragraph, so I need to be able to control the order, and potentially insert a new tag in the middle of an existing selection.
The closest I've found to having this functionality is TextBoxList and the 'Facebook Theme' of JQuery TokenInput. Both of these however only allow you to move the cursor between tags with the arrow keys - and I'm looking to be able to mouseclick to control the cursor aswell.
Anyone know anything that's got what I need? A few other key essentials are free-text input (when no tag matches), remote source of data, and form submission, but I'd hope they'll be easier to retro-fit to something else!
An update for Googlers - I went with jQuery-tokeninput, and have spent the day modifying the library to work with mouse input. When I get time to tidy the code, and check how it works with other themes, I may put a pull request on GitHub, it seems like fairly useful functionality to me.
Quickish issue. I'm currently working with RoR with a great deal of Javascript for a project. I have a particular entity that has a "color" property. Of course I want to do this as "snazzily" (yup that's a word) as possible, however, I'm not sure how to go about it. I've seen a million and one different "Color Pickers" but none seem to fit the overall bill.
My current paradigm involves editing the entities from the "Index" page instead of having to click "Edit" for each and every one. I've got that working for several fields. What I need to implement now is a quality ColorPicker that doesn't take up too much screen real estate and/or hides itself after being presented.
So, all that said, can someone point me to some quality JS techniques for dealing with "pop-ups" and/or window return values? I'd like to really understand what needs to occur as well, so a tutorial would be nice.
Much appreciated.
Did you look at jquery and the jquery-ui tools?
This is one of the jquery-plugins http://www.eyecon.ro/colorpicker/
I'm often conflicted about how to approach this problem in my applications. I've used any number of options including:
A generic multiselect - This is my least favorite and most rarely used option. I find the usability to be atrocious, a simple mis-click can screw up all your hard work.
An "autocomplete" solution - Downside: user must have spelling abilities to find the damn values they need, aren't exposed to ones they may not have in mind, and the potential backend performance of substring searching.
Two adjacent multiselects, with an add/remove button - Downsides: still "ugly" imo
Any number of fancy javascript solutions (http://livepipe.net/control/selectmultiple, http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/, etc.)
I haven't been able to find any usability studies done on the best approach to this problem. Many of these alternate solutions are great when you're going from <10 elements to a hundred, but may break down completely when you are going from a hundred to a thousand.
What do you guys use? Why do you use it? Can you point me to usability case studies? Is there a "magic" solution that has yet to be discovered?
My advice is don't use generic multiple select controls. I've been running User Experience Research for my whole career, and every single time I test a site with multiple select controls, it always turns out to cause problems for end users.
I did a post on this a while back: Multiple Select Controls Must Evolve or Die
Sounds like you knew this anyway, though. Your real question is "what do I use instead?" Well, to answer this question you have to work out whether the user's task leans towards recall or recognition.
(i) By recall, I mean the user knows what they want to pick before they have even seen the list. In this case, it's probably easiest for them if you offer an autocomplete tool (as used very effectively on facebook, for example). This solution is even better when the list of options is also impossibly long to present on a page (e.g. location names, etc).
(ii) Moving on to recognition - by this I mean a task that involves the user not knowing what they want to pick until they've seen the list of options. In this case, autocomplete doesn't give them any hints. An array of checkboxes would be much more helpful. If you can show them all at once, this is helpful to the user. Scrolling DIVs are more compact but they create a memory load for the user - i.e. once they've scrolled down, they have to remember which items they picked. This is particularly evident when users save a form and come back to it later.
So - thinking about your problem, do you need a solution for recall or recognition?
I can't point you to any case studies, unfortunately, but what I can tell you is that I personally prefer large checkbox arrays in two-to-five column layouts. Sure, they take up a lot of space, but they are extremely precise and uncomplicated.
I think for any control - be it basic multiselect, double list, checkbox array, or any other solution - once you go over a certain threshold of items it's going to be challenging for the user no matter what.
Have a look at Dojo Toolkit's DataGrid control. It's by far the most flexible and powerful, and supports multiple row selections. It also has accessibility features built in.
The ExtJS library has some really good solutions for your issue. There a bunch of user extensions for neat-o combos and multi select boxes.
If you want a combo select list, you can add query searching and pagination, plus design the resulting drop-down using easy templating, like in this example:
http://extjs.com/deploy/dev/examples/form/forum-search.html
Here is a nice multiselect, in the style you seemed to describe:
*(main_site)/learn/Extension:Multiselect2
You can find all user extensions here:
*(main_site)/learn/Ext_Extensions
Plus, you can easily include it into an existing web page without alot of extra overhead. ExtJS's full stack is quite large, but to get only the JS files you need, they provide a nice builder tool to grab just those parts you need:
*(main_site)/products/extjs/build/
Just a warning: ExtJS has just released 3.0, but I'm not sure the user extensions have been upgraded. The "forum-search" was taken from a 3.0 example though, so it will work just fine with the latest and greatest.
(*) Apparently new users can only post one link...