Semantic UI Dropdown Search - selecting with the enter key - javascript

I've been working with Semantic UI for a project. I'm using the Search Selection version of the dropdown (classes are 'ui fluid search selection dropdown'). Under each item, I have setup a custom data-dogs attribute, with either 0 or 1. If the selected item has a data-dogs value of 1, I need an item on my form to show, or hide if it's a 0.
It's working fine on the mouse click, but I'm rather rusty with JS, so I'm not sure if there is an easy way to get the same functionality with the enter key and up/down arrows).
The JS code I've made is below.
If anyone could give me some pointers, I'd very much appreciate it.
Many thanks in advance!
$('.item').on('click', function(){
if($(this).data('dogs')==1){
$('#dogCheckbox').removeClass('hidden');
console.log('Working?');
} else {
$('#dogCheckbox').addClass('hidden');
}
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="location" id="location_search">
<i class="dropdown icon"></i>
<div class="default text"></div>
<div class="menu">
<div class="item" data-value="1" data-dogs="0">A1</div>
<div class="item" data-value="2" data-dogs="0">A2</div>
<div class="item" data-value="3" data-dogs="0">A3</div>
<div class="item" data-value="4" data-dogs="0">A4</div>
<div class="item" data-value="5" data-dogs="0">A5</div>
<div class="item" data-value="6" data-dogs="0">A6</div>
<div class="item" data-value="7" data-dogs="0">A7</div>
<div class="item" data-value="8" data-dogs="0">A8</div>
<div class="item" data-value="9" data-dogs="1">A9</div>
<div class="item" data-value="10" data-dogs="1">A10</div>
<div class="item" data-value="11" data-dogs="1">A11</div>
<div class="item" data-value="12" data-dogs="0">A12</div>
<div class="item" data-value="13" data-dogs="1">A14</div>
<div class="item" data-value="14" data-dogs="1">A15</div>
<div class="item" data-value="15" data-dogs="1">A16</div>
</div>
</div>
<div class="ui checkbox hidden" id="dogCheckbox">
<input type="checkbox" tabindex="0" class="hidden" name="
form_dog">
<label>Dog friendly unit! Is a dog present?</label>
</div>

You can try this:
$(".item").keyup(function(event){
if(event.keyCode == 13){
$('.item').click();
}
});
13 is the Enter key code, so- when keyup event occurs, and the pressed key is Enter- do the click function.
Hope it helps

Related

Autocomplete like Basecamp?

I'm currently learning website design, I have started creating my own Basecamp like website (project management tool). I am in need of a plugin or a tutorial on autocomplete input javascript like Basecamp... however i'm unsure on how to set this up as i'm super new to javascript and still trying to get my head around it all.
Use the multiple search selection feature from Semantic UI's dropdown module:
https://semantic-ui.com/modules/dropdown.html#multiple-search-selection
Here's a sample jsfiddle: https://jsfiddle.net/9wnjra1z/
<form class="ui form">
<div class="field">
<label>Assigned to</label>
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="users" />
<i class="dropdown icon"></i>
<div class="default text">Select Users</div>
<div class="menu">
<div class="item" data-value="kristin_aardsma">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
<span>Kristin Aardsma</span>
</div>
<div class="item" data-value="jonny_cyrus">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
<span>Jonny Cyrus</span>
</div>
<div class="item" data-value="stevie">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/stevie.jpg">
<span>Stevie</span>
</div>
<div class="item" data-value="matt">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/matt.jpg">
<span>Matt</span>
</div>
</div>
</div>
</div>
</form>
You will need the following references in your code to use this library:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js

Dynamically created dropdown menu isn't opening

I created dropdown dynamically using javascript but when I tried opening the dropdown menu, it doesn't open at all.
This is how I created the dropdown dynamically:
$('#contentdiv').append("<div class='ui fluid selection dropdown'><input type='hidden' name='user'/><i class='dropdown icon'></i><div class='default text'>Select Friend/Follower</div><div class='menu' id='menu'>");
for(var k=0;k<fflist.length;k++)
{
$('#menu').append("<div class='item' data-value='"+fflist[k]+"'>"+fflist[k]+"</div>");
}
$('#contentdiv').append("</div></div>");
Web console show the element as this, I can't find any problem:
<div class="ui fluid selection dropdown">
<input type="hidden" name="user">
<i class="dropdown icon"></i>
<div class="default text">Select Friend/Follower</div>
<div class="menu" id="menu">
<div class="item" data-value="DivyanshuGaur16">DivyanshuGaur16</div>
<div class="item" data-value="akshaykumar">akshaykumar</div>
<div class="item" data-value="aamir_khan">aamir_khan</div>
<div class="item" data-value="SrBachchan">SrBachchan</div>
<div class="item" data-value="UncleOBEY">UncleOBEY</div>
<div class="item" data-value="Waakye_Orgasm">Waakye_Orgasm</div>
<div class="item" data-value="Iamdbeatz">Iamdbeatz</div>
<div class="item" data-value="KwameUltd">KwameUltd</div>
</div>
</div>

JQuery basic text replacement on click/change using .parent() and .closest()

I have this dropdown styled with ul and I need to replace the heading with the very first content inside the <span class="parent">some text</span>
The <ul> contains different sections with each section different headings. Such as locations, provinces, languages etc.
I have figured out how to do this, but each time it only grabs the first heading even if the heading of the chosen option changes.
So for example if I select something from let's say Provinces, the heading of my label doesn't change to Provinces but it stays on Country.
What am I doing wrong here?
Screenshot
/* Destination selection */
$('.field-destination').each(function() {
var parent = $(this);
var dropdown_menu = $('.dropdown-menu', parent);
$('li', dropdown_menu).on('click', function() {
$('.destination', parent).text($(this).find('span').text());
//$('label', parent).text($(this).closest('.parent_li').find('span.parent').text());
$('label', parent).text($(this).parent().find('.parent_li').closest('li').find('.parent').first().text());
$('input[name="location_name"]', parent).val($(this).find('span').text());
$('input[name="location_id"]', parent).val($(this).data('value'));
if (window.matchMedia('(max-width: 767px)').matches) {
$('label', parent).hide();
$('.render', parent).show();
}
dropdown_menu.slideUp(50);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-extra-field dropdown clearfix field-destination has-icon">
<i class="input-icon field-icon fa"></i>
<div class="dropdown" data-toggle="dropdown" id="dropdown-destination">
<label>Locatie</label>
<div class="render">
<span class="destination">Kies een plaats</span>
</div>
</div>
<input type="hidden" name="location_name" value="">
<input type="hidden" name="location_id" value="">
<ul aria-labelledby="dropdown-destination" class="dropdown-menu" tabindex="1">
<li class="item parent_li" data-country="" data-value=""><span class="parent">Country</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">City</span></li>
...
<li class="item parent_li" data-country="" data-value=""><span class="parent">Provinces</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">Province</span></li>
...
<li class="item parent_li" data-country="" data-value=""><span class="parent">Languages</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">language</span></li>
</ul>
</div>
Can anyone help me out?

Dropdown control in semantic ui

I need some help using the dropdown control in semantic.
Te multiple selection is not working as expected.
Here is the code:
<div class="ui fluid multiple search selection dropdown">
<input name="tag" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Tags</div>
<div class="menu">
<div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
</div>
</div>
and the script code
$('.tag .ui.dropdown').dropdown({allowAdditions: true});
A single select is the one thats works.
Thanks in advance :)
You should be using semantic-ui 2. Which version are you using?
See new UI elements here:
https://github.com/Semantic-Org/Semantic-UI/blob/master/RELEASE-NOTES.md#version-200---june-30-2015
Here you have your exact code running on plunker with version 2.0.8:
http://plnkr.co/edit/TPaqyX8f46H2K4eu59yp?p=preview
//Same code as in the question
<div class="ui fluid multiple search selection dropdown">
<input name="tags" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Tags</div>
<div class="menu">
<div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
</div>
</div>

How to change position of element using jquery

I have html stuff as below:
<div class="field-group">
<label for="customfield_10102">select list</label>
<select class="select" name="customfield_10102" id="customfield_10102">
<option value="-1">None</option>
</select>
</div>
<div class="field-group">
<label for="customfield_10103">select list1</label>
<select class="select" name="customfield_10103" id="customfield_10103">
<option value="-1">None</option>
</select>
</div>
any number of option as per configured.
query:
change the position of <select class="select" name="customfield_10103" id="customfield_10103"> to append with <select class="select" name="customfield_10102" id="customfield_10102"> (with 40 px margin) and also have to change both select list's width.
After that, remove <div class="field-group"><label for="customfield_10103">select list1</label></div>
Any one can suggest me , how i could achieve this using JQUERY?
NOTE: just for reference, i need such customization in JIRA custom field which can be achievable using jquery.
Another related query:
Below is HTML stuff:
<li id="rowForcustomfield_10102" class="item">
<div class="wrap">
<strong title="select list" class="name">select list:</strong>
<div id="customfield_10102-val" class="value type-select editable-field inactive"
data-fieldtype="select" title="Click to edit">
final2 <span class="overlay-icon icon icon-edit-sml" />
</div>
</div>
</li>
<li id="rowForcustomfield_10103" class="item">
<div class="wrap">
<strong title="select list1" class="name">select list1:</strong>
<div id="customfield_10103-val" class="value type-select editable-field inactive"
data-fieldtype="select" title="Click to edit">
1 <span class="overlay-icon icon icon-edit-sml" />
</div>
</div>
</li>
I want to remove "rowForcustomfield_10103" and just it's contained a element "customfield_10103-val" place at next to "customfield_10102-val" with some margin.
so, after that it will look as below:
`<li id="Li1" class="item">
<div class="wrap">
<strong title="select list" class="name">select list:</strong>
<div id="Div1" class="value type-select editable-field inactive"
data-fieldtype="select" title="Click to edit">
final2 <span class="overlay-icon icon icon-edit-sml" />
</div>
<div id="Div2" class="value type-select editable-field inactive"
data-fieldtype="select" title="Click to edit">
1 <span class="overlay-icon icon icon-edit-sml" />
</div>
</div>
</li>`
Please also let me know on this.
have tried below but unable to change position:
if(AJS.$("rowForcustomfield_10102").length > 0)
{
AJS.$("customfield_10102-val").after( AJS.$('customfield_10103-val'));
AJS.$('customfield_10103-val').css({ 'margin-left': '40px','width':'80px' })
AJS.$('customfield_10102-val').css({ 'width': '80px' });
AJS.$("#rowForcustomfield_10102 .name").html(null);
AJS.$("#rowForcustomfield_10103 .name").html(null);
}
try this
$("#customfield_10102").after($('#customfield_10103'));
$('#customfield_10103').css({ 'margin-left': '40px','width':'200px' })
$('#customfield_10102').css({ 'width': '200px' });
$('[for="customfield_10103"]').closest('.field-group').remove();
Here is one approach:
var $customfield_10103 = $('#customfield_10103'), $parent = $customfield_10103.parent();
$customfield_10103.appendTo($('#customfield_10102').parent()).css('marginLeft', '40px');
$parent.remove();
FIDDLE

Categories