Add fixed item and non-removable item to select2? - javascript

I have a mail module and I want to add the mentioned (in the photo) email or hr#example.com to be fixed selected and non-removable option in cc in a multi selection select2. How may I achieve this? any idea?
Here is my Blade syntax for selecting cc :
<div class="form-group">
<label>CC <span class="astirered">*</span></label>
{!! Form::select('cc[]', $employee_list, $mail_cc_user_id, ['class'=>'form-control select2','multiple']) !!}
<span class="astirered">{!! $errors->first('cc') !!}</span>
</div>
and this is the script of select 2 :
$('.select2').select2({
placeholder: "Please select one"
});

I dont think select 2 has a built in way for that, but with some additional JQuery it is possible to hide it. If you look the select box with inspector you will find something like this
<li class="select2-selection__choice" title="mni#email.com" data-select2-id="id">
<span class="select2-selection__choice__remove" role="presentation">×</span>
mni#email.com
</li>
You could remove that x by jQuery like this:
$('li.select2-selection__choice[title="mni#email.com"]').find('span.select2-selection__choice__remove').remove();
And then for exmaple you could mark that specific email default selected in the form, then run that jQuery command when document loads.

Related

How to add search for select in materialize css framework

I am new in materialize CSS framework and I am looking for searchable select.
I have added select component but now I want it to be searchable so that user can search value from dropdown options and select the value.
Thanks in advance
Another solution to this problem is to set minLength:0 when using Autocomplete - this essentially triggers the dropdown options on focus, and allows for searching or selecting.
The HTML:
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
The JS:
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
minLength: 0,
});
Codepen here.
I have been searching for this option for quite a while. After digging deeper into materialize Git Hub threads found this answer from LeMinaw
he got everything nailed out. but he was using a custom materialize file and also it wasn't working on the mobile. So, I have modified the code to fix mobile issue. Please use import the following script file after you imported the Materialize.js file MaterilizeSelect.js.
and format your select as following
<div class="input-field col s6">
<select data-id="26" id="MySelct" serachname="myselectsearch" searchable="your placeholder for seach box">
<option value="some1">Some One</option>
<option value="SeamSeam">SeamSeam</option>
<option value="toott">Toott</option>
<option value="Flat">Flat</option>
</select>
<label for="roof_type">My Select</label>
</div>
serachname --> A meaning fullname for search box
searchable --> placeholder your search box(label)
Hope this helps. Once again thanks to LeMinaw
There is an open issue on github.
LeMinaw's solution:
Improvements :
No need to modify Materialize JS files Grabs keyboard focus nicely No
need for annoying JQuery Renders correctly for any widget width Demo
The code is avalaible in this gist :
https://gist.github.com/LeMinaw/52675dae35531999e22f670fb66d389b
To use it, just load this JS file and add searchable="placeholder" to
your select element.
Materialize's search option just isn't great. You could work with these to try to "fix" it, but you're better off just utilizing a better select javascript package, like Select2, which does all this easily. https://select2.org/getting-started/installation
I use materialize for lots of things, but always strengthen it with Select2 (and some other form UI libraries).

Load select options on typing bootstrap select , jquery

i have a select box/dropdown/combobox which contains more than 14000 options it takes a long time to load these options when going to use it i'm using bootstrap select library for searching on options
https://silviomoreto.github.io/bootstrap-select/examples/
how to load on typing in search box or load 100 option only and load others on scroll or any other option to load it quickly.
this is the code
<div class="form-group select-group">
<label>{{trans('home.diag_name')}}</label>
{!! Form::select('diagnosis',$diagnosis,$v->Diagnosis->id,['class'=>'form-control selectpicker','data-live-search' => 'true' , 'title' => 'Select a Diagnosis']) !!}
</div>
i'm using laravel 5.2
better than using library select2 :
on this link and ajax method : https://select2.github.io/

Fill an input field from an "external" lists

I have an html form.
In one input field I have to insert the Customer.
I have a mysql database with all the customers (maybe 1000 or more).
As there are a lot of results, I don't want to use a dropdown list or something like that.
I want to put near the input field a button, and when I click on it it creates a popup with a list of all customer and some customizable filters, so i can search and double click on the desired customer and it puts the customer name (with ID in the Value) in the input form.
I don't find an example to do something like that, but I know that a lot of websites uses this kind of thing.
Can you help me to find an example or can you give me some hint on how to proceed?
Used languages: HTML, PHP, mysql, jquery, javascript
Thank you
On button click, Call a PHP file using ajax to load all the customers into a popup-box. Call dblclick() jquery fucntion to add the value, id of the customer into the input field.
HTML
<input type="text" class="inputField" name="CustomerName" />
<input type="text" class="inputField2" name="CustomerId" />
POPUP HTML
<ul>
<li><span data-cust-value="Cutomer some" data-cust-id="2" >Cutomer some</a></li>
<li><span data-cust-value="Cutomer some one" data-cust-id="3" >Cutomer some one</a></li>
</ul>
JQuery
$( ".customerValues" ).dblclick(function() {
$('.inputField').val($(this).attr('data-cust-value'));
$('.inputField2').val($(this).attr('data-cust-id'));
});

Detect same item selection for multiple select/dropdowns with AngularJS

I am still new with learning all the awesome things Angular can do and one thing I am trying to look at is throwing an ng-invalid if a set of dropdowns have the same item selected.
For example, if I had three selects drop downs, each holding the items: apple, orange, peach. And the user selected apple for drop down 1 and 2, how can I use angular to detect this within the select tag, and throw an ng-invalid?
an example of the current select list I am using are as follows.
<span>
<select ng-options="champ1.cID as champ1.cName for champ1 in Champions1 | orderBy: 'cName'" ng-init="0" ng-model="champ1">{{champ1.cName}}</select>
</span>
<span>
<select ng-options="champ2.cID as champ2.cName for champ2 in Champions2 | orderBy: 'cName'" ng-init="0" ng-model="champ2">{{champ2.cName}}</select>
</span>
<span>
<select ng-options="champ3.cID as champ3.cName for champ3 in Champions3 | orderBy: 'cName'" ng-init="0" ng-model="champ3">{{champ3.cName}}</select>
</span>
Would I use something like ng-if, or toss in some kind of ng-class? I am confused on where/how I would validate in regards to angular without doing some kind of directive or JQuery check.
you can use ui-validate for custom validations
<select ng-options="champ3.cID as champ3.cName for champ3 in Champions3 | orderBy: 'cName'"
ng-init="0" ng-model="champ3"
ui-validate="{'same' : 'champ1 == champ3 || champ2 == cmap3'}">
{{champ3.cName}}
</select>
but above answer only an example. with ui-validate many more custom validations. please read about ui-validate here.
you should read more about forms validations. sample links here/here .

Issues while reading value of input field in popover using jquery

I have a part of HTML like this which is generated dynamically. all tha value in popover are also generated dynamically. for now I have shown only one <li> value with the id = "loc" which is also given dynamically. I want to read the value of input field with id = "loc". whatever I have tried i can mention below:
in the first line of html you can see id = "close" . When a user will click on a icon with id = "close" I need to reed the value of li in the popover with the id = "loc".
I have tried
$('#data').on('click','.icon-remove',function(){
//var ptr=$(this).parents("tr.task");
//console.log($('i#close').find('p').css('background-color', 'red'));
//console.log(ptr.find(("#loc").val()));
//console.log($("#loc").val());
var $pel = $('.popover').find('#details')
console.log($pel.find('li#loc').val()); // through this I'm getting undefined
console.log($('.popover').find('#loc').val()); // this is giving me undefined
$('.popover').remove();
});
<i id=" close" class="icon-remove title-inner-pop closePop"></i>
<div class="popover-content">
<div>
<div class="more-option">
<span class="labels">1Yr Analytics</span>
<p>12 calls 15hours</p>
<a hrf="#">More...</a>
</div>
<div id="details">
<li>
<span class="labels">Location -</span>
<p>
<input id="loc" type="text" value="d">
</p>
</li>
I'll be really happy If some one can suggest me something to read the value in the input field with id = "loc" when someone click on icon inside popover with id="close".
thanks in advance.
Your over complicating this way to much. You have id's on your elements there is ZERO reason to use the find(). find() is for using advanced queries for dynamic content.
You have very static content simply use the below and that should work.
$("#close").click(function(){
var input = $("#loc").val();
})

Categories

Resources