Menu
I'm using the semantic-ui framework for my project. I need combobox functionality so I'm trying to combine a text input and the semantic-ui dropdown.
My requirements are:
1) Accept values that are not in dropdown
2) Perform validation against text input (e.g. no spaces)
3) Select / Search against dropdown
See: http://plnkr.co/edit/d5IUrqfHyjLy0qcH4qYQ?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.8.1/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.8.1/semantic.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h4 class="ui inverted black block header"><span>semantic ui</span></h4>
<div class="ui grid">
<div class="eight wide centered column">
<form class="ui form ui form segment">
<h4 class="ui dividing header">Personal Information</h4>
<div class="field">
<div class="ui icon input search dropdown">
<input type="text" id="jheader" data-validate="header" placeholder="Enter header" ng-model="person.gender">
<i class="dropdown icon link"></i>
<div class="menu">
<div class="item">Clothing</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('.ui.dropdown').dropdown({
onChange: function(value, text, $selectedItem) {
$("#jheader").val(text).trigger('input');
}
});
console.log("ready!");
});
</script>
</body>
</html>
I need to engage the dropdown search as I type values in the input.
792
I had pretty much the same problem a while back.
Here's an example on what I've done with mine to fulfill requirement 1) and 3). http://plnkr.co/edit/4nC44UETWhPb8yVNNtKz?p=preview
Code is also pasted below, but without the massive block of comments. Basically how it works is it uses the semantic's UI inbuilt search selection dropdown box class, i.e. "search selection", and uses on blur to set the hidden text field, which you submit.
Reason why you need to set the hidden text field using code is semantic UI generate a second text field, with class "search" which users would see and type data into, but isn't actually submitted.
There's also the other extra code to deal with other issues, refer to comments in plunker link above. To deal with one of them, I had to remove the automatically generated "active" class from the dropdown div options, resulting in non-bolding effect for selected dropdown item.
HTML
<div class="customDropdownSearchTextInput ui search selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="Male">Male</div>
<div class="item" data-value="Female">Female</div>
</div>
</div>
JavaScript
$('.ui.dropdown').dropdown();
$(".customDropdownSearchTextInput").each(function(){
var defaultText = false;
if ( $(this).find(".text").hasClass("default") && $(this).find(".text").text() )
defaultText = $(this).find(".text").text();
var isSelectTag = false;
if ( $(this).find("input:hidden").length < 1 || $(this).addBack().find( "select" ).length > 0 )
isSelectTag = true;
if ( isSelectTag == false )
{
$(this).dropdown(
{
forceSelection: false
});
$(this).find(".search").on("focus", function(event){
var aOpt = $(this).parent().find(".active");
aOpt.removeClass("active");
});
var originalText = $(this).find(".search").text();
$(this).find(".search").on("blur", function(event){
var text = $(this).val();
if ( originalText != text )
{
if ( $.trim(text)=="" && defaultText != false )
{
$(this).parent().find(".text").addClass("default").removeClass("filtered").text(defaultText);
}
$(this).parent().find("input:hidden").val(text);
originalText = text;
}
});
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
