It is possible to use "select2" in a "select"

[chinoosniel]

maybe this question is very simple but I have a "Modal" with a "select" field and I would like to use "select2". here I show an example in a reduced way:

<form unicorn:submit.prevent="">
<div class="modal show fade" id="ModalProductorBaseNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<select unicorn:model.defer="productor_new_unidad_produccion" class="form-control" name="unidadProduccion" id="EditarUnidadProduccion" required onchange="console.log(this.value)>
                      {% for unidad in unidadProduccion %}
                          <option value="{{unidad.id}}">{{unidad.name}}</option>
                      {% endfor %}
                  </select>

<button unicorn:click="productor_base_new_fun">Make</button>
</form>
</div>

<script>
    $("#ModalProductorBaseNew").on("show.bs.modal", function(event) {
        $('#EditarUnidadProduccion').select2({dropdownParent: $('#ModalProductorBaseNew')});
});
</script>

when changing the values ​​these are assigned correctly from what I see in the console, but the changes are not transmitted but the starting value returns. This only happens when I use select2

[adamghill]

Definitely not a simple question! Select2 will completely replace the select element and right now Unicorn doesn't handle that very well. If you look at Ignoring DOM-changes (using wire:ignore) in the Livewire (a very similar library for PHP/Laravel) docs there is some explanation of what is happening.

I created #153 to track this.

[adamghill]

@chinoosniel I have a PR ignoring elements in #161 which I think would be useful. It should be included in the next release.

[wasertech]

First of all thank you for this project. I already love it !
Secondly it saddens me to see that you can't use django form fields to render the html on the components. It would have been a breeze to use django-select2 using a ModelForm. I guess it would still be nice to have some sort of helper class to render those fields.

Anyway ! This was a pain but here is what I came up with in order to use field auto-completion.

component.py

from django_unicorn.components import UnicornView

class DomainsView(UnicornView):
    state = ""

    ALL_STATES = (
        "Alabama",
        ...
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming",
    )

    def clear_states(self):
        self.state = ""

    def states(self):
        if not self.state:
            return []
        qs = [s for s in self.ALL_STATES if s.lower().startswith(self.state.lower())]
        if [self.state] == qs:
            return []
        return qs

    class Meta:
        exclude = ("ALL_STATES",)

component.html

<div>
	<style>
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}
	</style>
	
	<form autocomplete="off" action="/action_page.php">
		<div class="autocomplete" style="width:300px;">
			<input id="state-name" unicorn:model="state" type="text" placeholder="State name">
			{% if states %}
			<div id="state-autocomplete-list" class="autocomplete-items">
				{% for s in states %}
				<a unicorn:click.stop="state='{{ s }}'" class="suggestion"><div>{{ s }}</div></a>
				{% endfor %}
			</div>
			{% endif %}
		</div>
		<input type="submit">
	</form>
<script>
/*execute a function presses a key on the keyboard:*/
	var currentFocus;
	const inp = document.getElementById("state-name")
	inp.addEventListener("input", function(e) {
		var a, b, i, val = this.value;
		/*close any already open lists of autocompleted values*/
		closeAllLists();
		if (!val) { return false;}
		currentFocus = -1;inp
	});
	inp.addEventListener("keydown", function(e) {
		var x = document.getElementById("state-autocomplete-list");
		if (x) x = x.getElementsByTagName("div");
		if (e.keyCode == 40) {
			/*If the arrow DOWN key is pressed,
			increase the currentFocus variable:*/
			currentFocus++;
			/*and and make the current item more visible:*/
			addActive(x);
		} else if (e.keyCode == 38) { //up
			/*If the arrow UP key is pressed,
			decrease the currentFocus variable:*/
			currentFocus--;
			/*and and make the current item more visible:*/
			addActive(x);
		} else if (e.keyCode == 13) {
			/*If the ENTER key is pressed, prevent the form from being submitted,*/
			e.preventDefault();
			if (currentFocus > -1) {
			/*and simulate a click on the "active" item:*/
			if (x) x[currentFocus].click();
			}
		}
	});
	function addActive(x) {
		/*a function to classify an item as "active":*/
		if (!x) return false;
		/*start by removing the "active" class on all items:*/
		removeActive(x);
		if (currentFocus >= x.length) currentFocus = 0;
		if (currentFocus < 0) currentFocus = (x.length - 1);
		/*add class "autocomplete-active":*/
		x[currentFocus].classList.add("autocomplete-active");
	}
	function removeActive(x) {
		/*a function to remove the "active" class from all autocomplete items:*/
		for (var i = 0; i < x.length; i++) {
		x[i].classList.remove("autocomplete-active");
		}
	}
	function closeAllLists(elmnt) {
		/*close all autocomplete lists in the document,
		except the one passed as an argument:*/
		var x = document.getElementsByClassName("autocomplete-items");
		for (var i = 0; i < x.length; i++) {
			if (elmnt != x[i] && elmnt != inp) {
				x[i].parentNode.removeChild(x[i]);
			}
		}
	}
	/*execute a function when someone clicks in the document:*/
	document.addEventListener("click", function (e) {
		closeAllLists(e.target);
	});
</script>
</div>

The concept is pretty basic. I started from the Search example component and added the javascript autocomplete example from W3Schools. I had to tweak it a little but the concept is the same.
It's definitely not perfect, but it's a start in the right direction. Also keep in mind that you'll have to validate the field at one point.

Let me know if you have any idea how to make it more robust.

[adamghill]

@chinoosniel I have added unicorn:ignore as an attribute and an example of how to use it with Select2 here: https://www.django-unicorn.com/docs/templates/#ignore-elements.

I'm going to lock this conversation, but feel free to create a new one if you need any other help!