CODEWITHSUNDEEP
jqueryjquery-select2typeahead
Adalyat Nazirov
Adalyat Nazirov

Reputation: 1627

Display select2 as plain input text

I'm using select2 plugin (latest version 4.0.2) for autocomplete in my probject. I found that select2 can be applied only to select control. The main problem is that text input placed as first option of this control (see img below).

Is there any way to have text input placed instead of select control (like typeahead plugin)?

Some of screenshots (actually you can try it here)

Collapsed (you can see here only standard select html control with selected option)

enter image description here

Expanded (text input place as the first option of select control, text input hidden if select collapsed)

enter image description here

Typeahead (applied to directly input text, type query text in the first row that always displayed on the page)

enter image description here

Upvotes: 6

Views: 23519

Answers (3)

Sébastien Gicquel
Sébastien Gicquel

Reputation: 4386

The hack with multiple works but is not elegant and has design problems. As shown in this answer, an alternative that works exactly as desired is offered by selectize.js

Here is a simple example

$('#normalize').selectize();
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>
<select id="normalize">
  <option value=""></option>
  <option value="1">Awesome</option>
  <option value="2">Beast</option>
  <option value="3">Compatible</option>
  <option value="4">Thomas Edison</option>
  <option value="5">Nikola</option>
  <option value="6">Selectize</option>
  <option value="7">Javascript</option>
</select>

Upvotes: 2

Nikhilesh Shivarathri
Nikhilesh Shivarathri

Reputation: 1670

Hope this is what you're trying to achieve. 

$(document).ready(function() {
$('#myInputEle').select2({
    width: '100%',
    allowClear: true,
    multiple: true,
    maximumSelectionSize: 1,
    placeholder: "Start typing",
    data: [
            { id: 1, text: "Nikhilesh"},
            { id: 2, text: "Raju"    }
          ]    
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/3.4.8/select2.css" />

<input type="text" id="myInputEle"/>

Upvotes: 7

MD JAHIRUL ISLAM
MD JAHIRUL ISLAM

Reputation: 61

Here is the solution -

STEP 1 select2 code 

$('#input').select2();

STEP 2 Add this CSS end of the select2.css -

.select2-dropdown--below {
  top: -38px; }

Please note : 38px is your input field height. You need to adjust your input height.

STEP 3 If you need to prevent select2 from flipping the dropdown upward

Open 

select2.js

Find 

var enoughRoomAbove = viewport.top < (offset.top - dropdown.height);
var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height);

Replace with 

 var enoughRoomBelow = true;
 var enoughRoomAbove = false;

Done !

DEMO

Check my customize version here https://codepen.io/gtanim/pen/pWEdQj

Upvotes: 3

Related Questions