问题
I use the js library select2. This is a screenshot of what I have now:
Start:
Click on dropdown:
Now is it possible to have an input field to start with and not directly a dropdownlist? I know it's possible because you can find it on the select2 site. An example is this:
But the documentation is very brief. This is what I have now:
<input type="text" name="questions[question1]" id="question1" class="question1" style="width:500px"/> function createQuestionTags(data, question_number){ $(".question" + question_number).select2({ createSearchChoice: function (term, data) { if ($(data).filter(function () { return this.text.localeCompare(term) === 0; }).length === 0) { return { id: term, text: term }; } }, data: data, placeholder: "Enter Question", allowClear:true }); } (The data is received from an ajax call)
回答1:
What you are seeing is actually a multi-select or multi-value drop down box in that example. It is not a single value drop down box like you are using in your code. Per the Select2 website, select2 will detect that you are trying to use a multi-select box and will automatically apply that styling instead of the default (drop down arrow, etc.).
If you in fact need a single value drop down box, there is no direct way to make it display with the formatting of the multi-select so that it looks like a regular input box. There may be a way to fake it by adding or removing CSS classes. I played around a bit but couldn't find one.
Since you don't want the formatting, the search box, or the multi-select capability (I'm assuming) you probably don't need to use the select2 library.
Update: It looks like you're not the first person to try to do this. They plan to add this feature but it might be a while: https://github.com/ivaynberg/select2/issues/1345
回答2:
The only workaround that I could come up with is to use both multiple: true and maximumSelectionSize: 1 when setting up.
Please see my example here: http://jsfiddle.net/DanEtchy/Lnf8j/
回答3:
This is possible in Select2 4.0.0 with the new selection adapters. You can swap out the SingleSelection with a MultipleSelection (including any relevant decorators) and it should behave as expected.
$.fn.select2.amd.require([ 'select2/selection/multiple', 'select2/selection/search', 'select2/dropdown', 'select2/dropdown/attachBody', 'select2/dropdown/closeOnSelect', 'select2/compat/containerCss', 'select2/utils' ], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) { var SelectionAdapter = Utils.Decorate( MultipleSelection, Search ); var DropdownAdapter = Utils.Decorate( Utils.Decorate( Dropdown, CloseOnSelect ), AttachBody ); $('.inline-search').select2({ dropdownAdapter: DropdownAdapter, selectionAdapter: SelectionAdapter }); $('.dropdown-search').select2({ selectionAdapter: MultipleSelection }); $('.autocomplete').select2({ dropdownAdapter: DropdownAdapter, selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss), containerCssClass: 'select2-autocomplete' }); });.select2-selection__choice__remove { display: none !important; } .select2-container--focus .select2-autocomplete .select2-selection__choice { display: none; }<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script> <p>With an inline search box</p> <select style="width: 200px" class="inline-search"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> <p>With the search box in the dropdown</p> <select style="width: 200px" class="dropdown-search"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> <p>With the selection hidden when it is focused</p> <select style="width: 200px" class="autocomplete"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select>By default, Select2 will set up the dropdown to have the search (instead of the selection container) which you will need to override if you want to perfectly emulate a multiple select.
回答4:
Instead of Select2 the better choice would be selectize because Select2 seems dead
The usage is easy:
$('select').selectize(options); Here is number of examples how to use and customize selectize
回答5:
In my case, I wanted the user's selections from the dropdown to appear in a list below the dropdown, rather than working like a regular dropdown list. So this workaround worked for me:
$('#myselect').select2({ multiple:true }) .on('select2:select', function (e) { //clear the input box after a selection is made $(this).val([]).trigger('change'); }); Of course that won't work if you want the selected item to stay selected in select2's input box like it does with a regular select2 multiselect list.
回答6:
Custom implementation using Bootstrap styling, simple but functional:
var elements = $(document).find('select.form-control'); for (var i = 0, l = elements.length; i < l; i++) { var $select = $(elements[i]), $label = $select.parents('.form-group').find('label'); $select.select2({ allowClear: false, placeholder: $select.data('placeholder'), minimumResultsForSearch: 0, theme: 'bootstrap', width: '100%' // https://github.com/select2/select2/issues/3278 }); // Trigger focus $label.on('click', function (e) { $(this).parents('.form-group').find('select').trigger('focus').select2('focus'); }); // Trigger search $select.on('keydown', function (e) { var $select = $(this), $select2 = $select.data('select2'), $container = $select2.$container; // Unprintable keys if (typeof e.which === 'undefined' || $.inArray(e.which, [0, 8, 9, 12, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 44, 45, 46, 91, 92, 93, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 124, 144, 145, 224, 225, 57392, 63289]) >= 0) { return true; } // Already opened if ($container.hasClass('select2-container--open')) { return true; } $select.select2('open'); // Default search value var $search = $select2.dropdown.$search || $select2.selection.$search, query = $.inArray(e.which, [13, 40, 108]) < 0 ? String.fromCharCode(e.which) : ''; if (query !== '') { $search.val(query).trigger('keyup'); } }); // Format, placeholder $select.on('select2:open', function (e) { var $select = $(this), $select2 = $select.data('select2'), $dropdown = $select2.dropdown.$dropdown || $select2.selection.$dropdown, $search = $select2.dropdown.$search || $select2.selection.$search, data = $select.select2('data'); // Above dropdown if ($dropdown.hasClass('select2-dropdown--above')) { $dropdown.append($search.parents('.select2-search--dropdown').detach()); } // Placeholder $search.attr('placeholder', (data[0].text !== '' ? data[0].text : $select.data('placeholder'))); }); }/* !important not needed with less */ .form-group { padding: 25px; } .form-group.above { position: absolute; bottom: 0; left: 0; right: 0; } .select2-container--open .select2-selection { box-shadow: none!important; } .select2-container--open .select2-selection .select2-selection__arrow { z-index: 9999; /* example */ } .select2-dropdown { /* .box-shadow(@form-control-focus-box-shadow); (from select2-boostrap */ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); /* border-color: @input-border-focus; */ border-color: #66afe9; border-top-width: 1px!important; border-top-style: solid!important; /* border-top-left-radius: @input-border-radius; */ border-top-left-radius: 4px!important; /* border-top-right-radius: @input-border-radius; */ border-top-right-radius: 4px!important; /* margin-top: -@input-height-base; */ margin-top: -34px!important; } .select2-dropdown .select2-search { padding: 0; } .select2-dropdown .select2-search .select2-search__field { /* !important not needed using less */ border-top: 0!important; border-left: 0!important; border-right: 0!important; border-radius: 0!important; /* padding: @padding-base-vertical @padding-base-horizontal; */ padding: 6px 12px; /* height: calc(@input-height-base - 1px); */ height: 33px; } .select2-dropdown.select2-dropdown--above { /* border-bottom: 1px solid @input-border-focus; */ border-bottom: 1px solid #66afe9!important; /* border-bottom-left-radius: @input-border-radius; */ border-bottom-left-radius: 4px!important; /* border-bottom-right-radius: @input-border-radius; */ border-bottom-right-radius: 4px!important; /* margin-top: @input-height-base; */ margin-top: 34px!important; } .select2-dropdown.select2-dropdown--above .select2-search .select2-search__field { /* border-top: 1px solid @input-border; */ border-top: 1px solid #66afe9!important; border-bottom: 0!important; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> <link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script> <div class="form-group"> <label class="control-label">Below example (click label to focus)</label> <select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="1"> <option></option> <option value="1">First choice</option> <option value="2">Second choice</option> <option value="3">Third choice</option> <option value="4">Fourth choice</option> <option value="5">Fifth choice</option> <option value="6">Sixth choice</option> <option value="7">Seventh choice</option> <option value="8">Eighth choice</option> <option value="9">Ninth choice</option> </select> </div> <div class="form-group above"> <label class="control-label">Above example (click label to focus)</label> <select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="2"> <option></option> <option value="1">First choice</option> <option value="2">Second choice</option> <option value="3">Third choice</option> <option value="4">Fourth choice</option> <option value="5">Fifth choice</option> <option value="6">Sixth choice</option> <option value="7">Seventh choice</option> <option value="8">Eighth choice</option> <option value="9">Ninth choice</option> </select> </div>Select2's minimumInputLength: 1 option can hide the dropdown on focus/open...
Update: Code cleanup, don't open dropdown on focus.
回答7:
Matt,)
this work
$('.search-town-flat').select2({ multiple: true, placeholder: "Enter values", allowClear: true, maximumSelectionLength: 2, theme : "classic" }).on('select2:select', function (e) { $(this).val([]).trigger('change'); $(this).val([e.params.data.id]).trigger("change"); }); 回答8:
$.fn.select2.amd.require([ 'select2/selection/multiple', 'select2/selection/search', 'select2/dropdown', 'select2/dropdown/attachBody', 'select2/dropdown/closeOnSelect', 'select2/compat/containerCss', 'select2/utils' ], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) { var SelectionAdapter = Utils.Decorate( MultipleSelection, Search ); var DropdownAdapter = Utils.Decorate( Utils.Decorate( Dropdown, CloseOnSelect ), AttachBody ); $('.inline-search').select2({ dropdownAdapter: DropdownAdapter, selectionAdapter: SelectionAdapter }); $('.dropdown-search').select2({ selectionAdapter: MultipleSelection }); $('.autocomplete').select2({ dropdownAdapter: DropdownAdapter, selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss), containerCssClass: 'select2-autocomplete' }); });.select2-selection__choice__remove { display: none !important; } .select2-container--focus .select2-autocomplete .select2-selection__choice { display: none; }<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script> <p>With an inline search box</p> <select style="width: 200px" class="inline-search"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> <p>With the search box in the dropdown</p> <select style="width: 200px" class="dropdown-search"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> <p>With the selection hidden when it is focused</p> <select style="width: 200px" class="autocomplete"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option><option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select>回答9:
Use these properties
$('#placeSelect').select2({ width: '100%', allowClear: true, multiple: true, maximumSelectionSize: 1, }); just call this function on onchange event of dropdown
function ResentForMe(){ var _text=$('.select2-selection__rendered li:first-child').attr('title'); $('.select2-selection__rendered li:first-child').remove(); $('.select2-search__field').val(_text); $('.select2-search__field').css('width','100%'); } Note: Remove "Multiple" attribute from select
回答10:
I simply formatted a standard input box with CSS to look like a Select2() dropdown:
input { width: 100%; padding: 7px 5px; margin: 1px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } 来源：https://stackoverflow.com/questions/20223044/select2-start-with-input-field-instead-of-dropdown