Is there any good (free or paid) JavaScript controls, which is like StackOverflow tags picker? (You can see it while asking new question under the title "Tags").
jQuery UI Autocomplete configured for multiple values is a pretty good start. I would think with a little bit of re-restyling that it could be a lot more like the SO tag browser; also it's free.
Chosen is a good example, they have a nice multi-select option.
Related
I am trying to bind tagsinput with source option but it is not working. I am not understanding what I am missing there. Its a small code which I took from their official site http://www.jqueryscript.net/demo/Nice-Tags-Manager-Plugin-with-jQuery-Bootstrap-Bootstrap-Tags-Input/examples/. Also there is no error on console. fiddle
$(document).ready(function () {
$('#aa').tagsinput({
source:['ams','bms','lite']
})
});
This might not be the answer you are looking for but I feel that I must share my experience. I've tried A LOT of these third-party javascript tagging systems (including yours). Some didn't workedl; some did but some functionality was missing, etc. The solution that I've found to work best is selectize.js. It has most of the required functionality, here is some of it:
Add and remove items in any order without touching your mouse.
You can choose whether the user can create new tags or use only the ones you've provided for them
You can limit the count to your tags
It has a nice interface
It is fairly simple to use
I know this doesn't answer your question but I just feel obliged to tell you given the fact that I've wasted so much time searching for that kind of thing.
I am looking for something similar to friends filter in facebook. When you type '#' inside text area it shows you a list of friends to select. I have tried to search for dropdown inside textbox, but was not able to find what I was looking for.
I think you are searching for
http://podio.github.io/jquery-mentions-input/
Or
https://github.com/jakiestfu/Mention.js/
Another one
http://www.emposha.com/demo/fcbkcomplete_2/
Writing this in 2021
Many of the suggested libraries are not actively developed/supported, and haven't been touched in many years.
There is this library called tribute which might be of good help:
Working Example: https://zurb.github.io/tribute/example/
Github Repo: https://github.com/zurb/tribute
JQueryUI might be an option here, could just be for reference.
JQuery UI autocomplete
This seems quite similar to your needs
http://harvesthq.github.io/chosen/
After playing with all of these options, I have to say that at.js is far and away the better option. Both the podio library and the mentions.js library mentioned in the selected answer are hardly supported any more and full of issues. At.js has over 4000 stars on github, is actively developed, and is just a better piece of software.
http://ichord.github.io/At.js/
I am trying to build a little test shell for my website using Javascript. What I have at the moment is a normal website. PHP/HTML with an SQL backend.
What I'd like is a simple Javascript feature whereby the user has a single slider object and can use this object to set the upper and lower limit on a number of variables, which will be determined by a drop down box just underneath the slider.
Aside from this, I'd just like a number of checkboxes which dictate which products are displayed (i.e if I'd like food but not drink, the food checkbox would be ticked!).
I'm not expecting anyone on SO to do this for me, of course, but I would like to find some specific areas I could go to learn how to do this, and google is failing me in this regard. I will then begin working/editing this post to show my code/ask for help.
Can anyone help please?
It seems that you want to build a specific search for site, but instead of the user searching it is what is displayed. I would start with looking at php, based upon which checkboxes they choose, you can return variables which would show them what they want to see.
I personally wouldn't use javascipt for this.
I'm not sure what your level of experience is with Javascript, so my apologies if this answer is too basic.
To put a slider on your page refer here for the HTML:
http://webhole.net/2010/04/24/html-5-slider-input-tutorial/
Then in Javascript get the value of that slider when making your GET requests of the server.
You can store the selected value or checked value in the target element, when you process, you just call the element and get the value from them. Using jquery data() method can store the value to element and retrive it pretty easy.
If you still have no clue, I redcomend you learn some basic javscript techniques, go to this site www.jquery.com .
Are you using jQuery and jQuery UI? jQuery UI has a nice slider widget with a number of configuration options and good documentation: http://jqueryui.com/demos/slider/
If you're not used to it, there may be a bit of a learning curve for jQuery, but it makes a great number of UI features much, much easier to code. Showing and hiding elements based on checkboxes, for example, is a pain to do in straight JS but fairly simple to do with jQuery. There are lots of other ways to just make a slider, but if you're planning to do much more with the UI I'd strongly recommend using a library like jQuery to do the heavy lifting.
I am looking for some kind of example of a Javascript Time Picker that is similar to the one used in Windows to pick the time...well except with out the seconds being in their. I have a mockup in place at the moment but trying to figure out how some of the user functionality should be be as it is two inputs and a dropdown. I guess I just am not happy with it at this point.
Thanks ahead of time for any help
There are a number of jQuery plugins that you can use for the perfect looking time picker control.
Here is a good one: http://plugins.jquery.com/project/timepicker
The Windows time picker (if you're referring to the one to change the system clock) is basically just a masked edit text box. If you're looking for something similar, you just need some JavaScript to do masked edits, like this one:
http://digitalbush.com/projects/masked-input-plugin/
To make it specifically for time, you should be able to easily add logic to ensure the hours don't go over 12 (or 24), and the minutes don't go over 59.
Personally, I prefer the way Google Calendar does time selections. There is a jQuery plugin for this which can be found here:
http://labs.perifer.se/timedatepicker/
Here's a cool one.
http://www.java2s.com/Code/JavaScript/GUI-Components/FancyTimePicker.htm
An online example of the control is posted here.
Like Dan said, if you are looking for a masked text input and if you want to use the PrototypsJS framework, there is http://code.google.com/p/phenx-web/ .
And if you want a good date/time picker, you could use this : http://home.jongsma.org/software/js/datepicker (also PrototypeJS). I'm currently working on it with Jerermy Jongsma to add more features.
I'm pretty fond of the jQuery stuff, There is a fairly nice one here.
I ended up creating a prototype time picker that for the time being is less fancy than a lot of the others out there. It shows up a regular input until you click on it then it shows a dropdown that has times in it.
I can share the code if anyone is interested
A timepicker shouldn't slow down the user's interaction, should be pretty straightforward without having to play with it for a while, and should be keyboard-accessible for users who can't manipulate a mouse. The time-picking functionality provided by the Any+Time™ Datepicker/Timepicker AJAX Calendar Widget with TimeZone Support meets all of these design goals, supports countless date/time formats and is easy to customize using CSS or jQuery UI.
A good test of timepicker usability is to think of an odd time (say, 10:32pm) and then see how long it takes to accurately select that time using various time pickers. You can probably do it with Any+Time™ faster than you can even write out the time by hand... how's that for speed and ease of use? :-p
I know they're using a jQuery plugin, but I can't seem to find which one they used. In particular, what I'm looking for is autocomplete with exactly the same functionality as SO's autocomplete, where it will perform an AJAX command with each new word typed in and allow you to select one from a dropdown.
Note that the tag editor has been completely re-written now, and no longer resembles the original, simple text box w/ suggestion drop-down that adorned the site for nearly three years.
If you're interested in the new form, see this Meta question: https://meta.stackexchange.com/questions/102510/can-i-use-the-tag-textbox-script
Autocomplete is the plugin used originally, albeit with various tweaks and customizations made to it over the years.
You might also like this one:
http://code.google.com/p/jquery-autocomplete/
Read the history here: http://code.google.com/p/jquery-autocomplete/wiki/History
Have a look at SO_Tag, a tagging system based on StackOverflows tagging system.
And Github.