select and input in one - javascript

Is there any plugin or way to make select with search option, and if there is no option like entered in search that entered value would be like input..
Have form with lots of manufacturers and models to select.. but also there is lots of new ones and want to make it in one place.. so that wouldn't need to go another page ant save the model or manufacturer..
for now thinking about making it with chosen plugin (https://harvesthq.github.io/chosen/) like tag input.. but still more want to make like select with input in one..
also must work with select/input with names of array like manufacturer_id[] etc..

Do you know Select2 ?
https://select2.github.io/examples.html
Maybe you can do something with it.

Related

Selecting more than one value without checkboxes

Currenty I am using checkboxes to select more than one value in a form. So when creating a new post I can select all the categories it falls into. But the cat list is getting longer and is becoming a bit unmanagable.
I like how wordpress adds tags to each post via ajax. Wordpress has a text input field with autocomplete, you just start typing and then if it's already there (in the db) then it'll show and get adding to a list dynamically. If it's not found in the list then it gets inserted on form submit.
How can I achieve this or similar so that I don't have to use x amount of checkboxes?
Check out this jQuery library. It works on multi selects instead of checkboxes, but the logic and result is exactly what you need.
http://harvesthq.github.io/chosen/
(not affiliated, I've just used it a few times)
One option would be to make use a library such as jquery-autocomplete
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
This makes use of AJAX based functionality and will give you the ability to tweak it based on values stored in a database table. You can make a simple check function that, in the case the value can not be found, the user will have the option to simply press add and insert it into said library.
The rest is jsut a matter of styling and design.

Using chosen.js to let user add the options not in the list?

I want to use http://harvesthq.github.io/chosen/ lib to make nice lists of items for my users to choose.
The way it works is that it converts a list into an input field, where user can simply enter a value and if it exists in the list of options, it'll be added as a kind of tag in the list.
What I want to do, however, is if the user types something in that does not exist, they can add it as a new option into the list.
Is it possible using chosen or maybe you know of a better solution?
Basically it should work a bit like StackOverflow's Tags field - you type something in, if it exists, it's selected. If not – something new is added.

Select control search on the basis of data fields

Currently I am using Jquery Chosen Plugin in order to search the values written inside a search box and it works very well in case I want to search on the basis of the text written inside the option tag. i.e. as shown in the figure:
But what I want to achieve is search on the multiple basis i.e. on the basis of the text written inside the option tag as well as the data attributes of the option tag i.e.
For example in the above figure I may be able to search Debitors either by typing Debitors directly or by typing the data-phone's value i.e.0321-111111. I've searched the chosen plugin's documentation for the possibility to search on the basis of multiple values but, as much as I know, there wasn't any functionality provided by it.
Now what I'd like to ask is, Is there any jQuery plugin providing this multisearch functionality that you may know of?
Thanks.
Finally, I found Select2 Jquery plugin that allows the custom matcher for the searching. i.e. You can define whatever you want plugin's search to search.

dojo filteringSelect - allow entry of list items only

Is there a way to force filteringselect to only allow the user to type items that appear in the drop list. I know that it will invalidate anything that is not in the list, but I would just rather it not allow invalid entries to show.
Really, what I would like to see is behaviour that matches the HTML SELECT control. Dojo doesnt seem to provide this with any of its controls.
Im not sure if I read you okay but this is how it things go:
If you type what is in the drop list of the FilteringSelect widget
then there will be no validation error.
If you want to match the HTML Select dropdown, then use
dijit.form.Select.
If you want to Filtering Select behaviour but want also be able to type in values that are not in the drop list, then use the
dijit.form.ComboBox widget.

jqgrid multiselect edit form fields

I need a form structure to read from JSON, put the values in a multiselect field in edit form mode(not inline), and let the user set the values for the ones he selected.
I dont know if its possible.
I did this and worked fine: https://stackoverflow.com/a/4985705/1052077
But I still need to associate a value to each of the selected items in the second list, like and input so the user can select the number he wants.
Like "physics - 4" and then grab that number(4) to save server side.
I wanted something like this http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#column_chooser
But the ones I found were only accepting the columns values, not any kind of source value.
Thanks in advance!
You can use the multiselect widget directly without the columnChooser. The last version of the widget you can find on the github.

Categories