Editable and autocomplete combo box with JavaScript - javascript

I need to make a combo box in my form to be editable and capable to search the input text through the values of the combo box (like autocomplete way).
What's the simplest way to obtain this?

If you aren't already using any framework that provides this component (i.e. YUI), this component might be useful to you: dhtmlxCombo

You can take a look at Dojo's ComboBox.
It has all the features you require and more.

I am searching for it myself. One of the solutions I've found is jQuery UI's autocomplete. Seems to be very flexible and well documented. See http://jqueryui.com/autocomplete/#combobox for example.

Related

react-select v2 reorder on drag and drop

I'm using react-select v2 plugin for my select box and as I have multiple selections possibility enabled. I need to use drag and drop to switch order of the selected values.
Have you ever create feature like this, any idea?
Thanks in advance
You will probably have to improve the rendered options with drag&drop feature.
You can check the excellent react-dnd library for that. They propose some React higher-order components that are easy to use if you are already familiar with common React patterns.

How to use html input box with extra properties?

I want to add the ability to use table, bold, paragraph, headings, images and bullets in a text area. How do I achieve this?
i.e. like we get input box in wordpress when we want to publish page.
or
Input box like stack over flow. Now i have options of making text bold, rich, images and many more.
I want the same kind of box.
Please tell me how can I?
Thank you
This is typically solved using a Javascript library. There are many javascript libraries that enable this. An example of a popular one is a javascript library named TinyMCE. They all have clear documentation on how to use them. (No need to repeat instructions here)
https://www.tinymce.com/
#ravisachaniya recommends CKEditor
use tinymce it has a lot more options than you need but you can customize it to your needs https://www.tinymce.com/
You can use CKEditor, i hope solve your isseu
http://ckeditor.com/demo

Multi-column Select box

Im looking for a multi-column select box that is searchable.
I have found Flexbox (http://www.fairwaytech.com/flexbox) which does almost everything I need except it limits searching only to the {name} column. I'm needing something that will search over all columns shown.
Im looking for something as powerful as the MS Access dropdown boxes if possible.
Thanks in advance.
not sure if this is what you're looking for...
Presenting SooperFish: jQuery plugin for Multi-Column Dropdown Menus
I ended up creating a (rather crude) custom combo box using div's and a bit of javascript. While it isn't the most elegant it works for my purposes.
Hopefully someone is working on something similar to this but for now this is the only solution I was able to find.

How to implement "Drag-Select" functionaility within Javascript?

I would like to implement some "Drag-select" functionality into a project of mine but i'm unsure how to implement it.
The creation of the selection area is not a problem, it's the capturing of elements within the area itself which is confusing me.
A jQuery example found here.
Selectable Demo
If you can use jquery there are some plugins that do this operation. Anyway you can check if the position of the element is contained into the selection area coordinates and, if it is, you select it.
Script.aculo.us has a nice implementation of drag-n-drop, but then you have to include this rather large library. Or you could investigate how they done it for that matter, since its open-source.

Professional jQuery based Combobox control? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Are there any professional Combobox controls (dropdown list with autosuggestion) based on the jQuery library?
It should be able to handle large datasets and have some skinning options. A multi-column result list would be great too. I'm working with ASP.NET, but it's a not a problem if I had to write a wrapper for it.
I'm already using a third-party control, but I ran into some compatibilty issues between two vendor's controls. Well, I want to get rid of this kind of dependencies.
Here's one that looks very promising. It's a true combo - you see what you type. Has a cool feature I haven't seen elsewhere: paging results.
FlexBox
Unfortunately, the best thing I have seen is the jquery.combobox, but it doesn't really look like something I'd really want to use in my web applications. I think there are some usability issues with this control, but as a user I don't think I'd know to start typing for the dropdownlist to turn into a textbox.
I much prefer the Combo Dropdown Box, but it still has some features that I'd want and it's still in alpha. The only think I don't like about this other than its being alpha... is that once I type in the combobox, the original dropdownlist items disappear. However, maybe there is a setting for this... or maybe it could be added fairly easily.
Those are the only two options that I know of. Good luck in your search. I'd love to hear if you find one or if the second option works out for you.
Anyone looking for a jquery "combo box" seems to be directed to this question. My post is for people coming to this page to find a "traditional" combo box, rather than an answer to the original question. The above solutions all focus on using the input as a means to filtering and autocompleting to an existing select value. (great for large datasets)
If you're looking for the traditional combo box, which is simply "Type something or select from these pre-defined values" (no we won't hide the ones that don't match while you're typing), all you may need to do is
<select id="combo4" style="width: 200px;"
onchange="$('input#text4').val($(this).val());">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<input id="text4"
style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />
See
http://bit.wisestamp.com/uncategorized/htmljquery-editable-combo-2/
Should be easy to wrap this into a plugin that converts an existing select tag, though I haven't seen that done yet.
P.S.: The main problem I see with "jQuery Editable Combobox" is that it remains a select list, and it is not obvious at all that you can just start typing something new.
A new fork of the sexy-combo project is now out which looks promising: http://code.google.com/p/ufd/
For large datasets, how about JQuery UI Autocomplete, which is basically the "official" version of Jorn Zaeferrer's Autocomplete plugin?
I also wrote a straight JQuery combobox plugin that's gotten pretty good feedback from its users. It's explicitly not meant for large datasets though; I figure that if you want something that prunes the list based on what the user types, you're better off with Jorn's autocompletion plugin.
Another nice plugin is Sexy Combo
This is also promising:
JQuery Drop-Down Combo Box on simpletutorials.com
An official jQuery UI ComboBox/Autocomplete component is in the making... (previously in beta for jQuery UI 1.5.x), see jQuery UI Wiki
UPDATE:
Autocomplete functionality is now a core feature of jQuery UI, see docs.
If you don't need multi-column, chosen is another good choice. MIT Licensed
I found this other one: http://code.google.com/p/jquery-jec/
Also seems like a good option.
I'm looking for the same.
The one I liked most till now is this one for ExtJs - except I havent tested it with large Lists:
www.sencha.com/deploy/dev/examples/form/combos.html
Here is another really(!) fast one:
http://jsearchdropdown.sourceforge.net/
For example the SexyCombo works quite fantastic but is way to slow for
longer lists.
The SexyCombo folk UFD is a lot faster, but initialization time is still quite slow for really huge lists.
Besides I get sometimes some little! "flashing".
But I guess there will be some updates in the near future.
Sexy-Combo has been deprecated. Further development exists in the Unobtrusive Fast-Filter Dropdown project. Looks promising, as i have similar requirements.
https://code.google.com/p/ufd/
I like select2, it's feature-rich and nice and active. Particularly like the diacritic search feature.
Why don't you try http://jqueryajax.codeplex.com/. It is a collection of ASP.NET controls that contains multicolumn drop down as well.
Activewidgets has a very nice looking one. No idea how well it performs on large datasets.
http://www.activewidgets.com/ui.combo/
I had the same problem, so I ended up making my own.
It has a template system built in, so you can make the results look like anything you want.
Works on all major browsers and accepts arrays & json objects.
http://code.google.com/p/custom-combobox/
Here's a really cool one: http://www.xnodesystems.com/ The Dynamic List Field not only has the autocomplete capability, but also is able to do validation.
I've tried http://jqueryui.com/demos/autocomplete/#combobox and the problems faced were:
Cross browser rendering
Inability to submit custom value
As a result I've tweaked it a bit and it worked fine for me in ASP.NET MVC. My version of CSS and widget script can be found here http://saplin.blogspot.com/2011/12/html-combobox-control-and-aspnet-mvc.html
Sample on binding MVC model to custom value is also there.
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
Try this one:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm
Very nice with many features including localization.
Highly recommending Twitter Typeahead:
http://twitter.github.io/typeahead.js/
all what you need
http://jquerycomboboxtmpl.codeplex.com/
drop-down on templates

Categories

Resources