Dropdown inside textbox/textarea - javascript

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/

Related

bootstrap tagsinput source not working

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.

Range-slider control

There is a good kind of a range-slider control http://makescreen.ru/i/50c4af7ae3a9058a7f551d398ccecf.jpg
I'd like to use something similar for my project. But I didn't find anything. It would be better if this control exists for twitter bootstrap. If it doesn't, anything similar would be ok.
Your ideas?
I know this question is a couple of months old and already has an accepted answer, but I just came across this as well:
http://www.eyecon.ro/bootstrap-slider/
and it seems relevant to the discussion.
I recommend using jQuery UI (linked version specifically for twitter bootstrap) - they have everything you could ever need for javascript UI elements.

Tags picker control

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.

jQuery Mind Map/Think Map

I was wondering if anyone happens to know of a jQuery (or pure javascript) mind map. I found this one a few times, but it uses MooTools, unfortunately.
I decided to port the one you found into a jQuery plugin, which can be found LINK REMOVED - SEE EDIT. It was written up in about 2 hours last night, so is probably riddled with bugs. If you find any bugs, feel free to email me at the email listed in my StackOverflow profile.
Edit: I've contacted the author of the original Mindmap, and my jQuery conversion has become the core of development. You can get it, as well as speed improvements and new functionality here, on the Github page.
I think you should try http://thejit.org/
I use it all the time and is perfect for my needs.
There's also arbor.js, much newer then the ones cited in other answers. It implements the force directed algorithm for layout, similar to js-mindmap that you cited, but with better performance since it uses webworkers. The actual rendering is left for you, so you can use jquery or whatever you prefer.
Also, if you decide to write your own implementation, a good visualization library is d3.js.
I wrote this one for a project, it's an enhanced jQuery plugin version of other js node maps I found online suitable for dynamic contents (i.e. also supports dynamic adding/removal of nodes, selection marks, customizable callbacks and styles).
Notice: IE wasn't in the compatibility targets since it's also officially being dropped

How does StackOverflow's 'tags' textbox autocomplete work?

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.

Categories